/* ==========================================================
   HRTECHIFY DESIGN SYSTEM
   Module 01
   Variables
   Version : v0.10.0-beta
========================================================== */

:root{

    /* ======================================================
       BRAND PALETTE
    ====================================================== */

    --brand-gold:#FFB000;
    --brand-orange:#FF7A00;
    --brand-red:#FF4D00;

    --brand-blue:#2563EB;
    --brand-blue-light:#4F8BFF;

    /* ======================================================
       BACKGROUNDS
    ====================================================== */

    --bg-primary:#05070B;
    --bg-secondary:#0A1020;
    --bg-surface:#121A2B;
    --bg-card:#182235;
    --bg-card-hover:#1E2B44;

    /* ======================================================
       GLASS
    ====================================================== */

    --glass-bg:rgba(255,255,255,.05);
    --glass-hover:rgba(255,255,255,.08);
    --glass-border:rgba(255,255,255,.08);

    /* ======================================================
       TEXT
    ====================================================== */

    --text-primary:#FFFFFF;
    --text-secondary:#CBD5E1;
    --text-muted:#94A3B8;

    --text-dark:#0F172A;

    /* ======================================================
       STATUS
    ====================================================== */

    --success:#22C55E;
    --warning:#F59E0B;
    --danger:#EF4444;

    /* ======================================================
       BRAND GRADIENTS
    ====================================================== */

    --gradient-brand:
        linear-gradient(
            135deg,
            #FFB000 0%,
            #FF7A00 55%,
            #FF4D00 100%
        );

    --gradient-dark:
        linear-gradient(
            180deg,
            #05070B 0%,
            #0A1020 100%
        );

    --gradient-card:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.02)
        );

    /* ======================================================
       GLOWS
    ====================================================== */

    --glow-brand:
        0 0 45px rgba(255,122,0,.28);

    --glow-blue:
        0 0 35px rgba(37,99,235,.25);

    /* ======================================================
       SHADOWS
    ====================================================== */

    --shadow-sm:
        0 8px 20px rgba(0,0,0,.18);

    --shadow-md:
        0 16px 40px rgba(0,0,0,.25);

    --shadow-lg:
        0 35px 80px rgba(0,0,0,.35);

    /* ======================================================
       BORDER RADIUS
    ====================================================== */

    --radius-xs:8px;
    --radius-sm:12px;
    --radius-md:18px;
    --radius-lg:24px;
    --radius-xl:32px;
    --radius-pill:999px;

    /* ======================================================
       SPACING
    ====================================================== */

    --space-1:8px;
    --space-2:16px;
    --space-3:24px;
    --space-4:32px;
    --space-5:48px;
    --space-6:64px;
    --space-7:96px;

    /* ======================================================
       CONTAINER
    ====================================================== */

    --container-width:1280px;
    --page-max-width: min(1440px, 100%);
    --page-gutter: clamp(16px, 4vw, 48px);
    --content-narrow: 720px;
    --content-medium: 960px;
    --content-wide: 1180px;
    --section-space: clamp(48px, 8vw, 96px);
    --card-gap: clamp(16px, 2.5vw, 28px);
    --card-min-width: 280px;
    --navbar-height: clamp(68px, 8vw, 84px);
    --font-size-body-fluid: clamp(1rem, .96rem + .18vw, 1.125rem);
    --font-size-heading-fluid: clamp(2rem, 1.35rem + 3vw, 4.5rem);

    /* ======================================================
       ANIMATION
    ====================================================== */

    --transition-fast:.20s ease;

    --transition-normal:.30s ease;

    --transition-slow:.45s ease;

}