/* ==========================================================
   FIGORA ONE v2.1
   Global Design Tokens
   ========================================================== */

:root{

    /* ======================================================
       BRAND COLOURS
    ====================================================== */

    --color-primary:#0B1F3A;
    --color-primary-dark:#08172B;

    --color-secondary:#2563EB;
    --color-secondary-dark:#1D4ED8;

    --color-accent:#2DD4BF;
    --color-accent-dark:#14B8A6;

    /* ======================================================
       NEUTRALS
    ====================================================== */

    --color-white:#FFFFFF;
    --color-black:#000000;

    --color-bg:#F8FAFC;
    --color-surface:#FFFFFF;
    --color-surface-alt:#F1F5F9;

    --color-heading:#0F172A;

    --color-text:#334155;
    --color-text-light:#64748B;

    --color-border:#E2E8F0;
    --color-border-light:#F1F5F9;

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

    --color-success:#10B981;
    --color-warning:#F59E0B;
    --color-danger:#EF4444;
    --color-info:#0EA5E9;

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

    --gradient-brand:
        linear-gradient(
            135deg,
            #2563EB 0%,
            #2DD4BF 100%
        );

    --gradient-dark:
        linear-gradient(
            135deg,
            #0B1F3A 0%,
            #1E3A8A 100%
        );

    --gradient-light:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #F8FAFC 100%
        );

    /* ======================================================
       TYPOGRAPHY
    ====================================================== */

    --font-heading:"Plus Jakarta Sans",sans-serif;
    --font-body:"Inter",sans-serif;

    /* ======================================================
       FONT SIZES
    ====================================================== */

    --fs-display:72px;

    --fs-h1:56px;
    --fs-h2:48px;
    --fs-h3:34px;
    --fs-h4:26px;
    --fs-h5:22px;
    --fs-h6:18px;

    --fs-xl:22px;
    --fs-lg:20px;
    --fs-md:18px;
    --fs-base:16px;
    --fs-sm:15px;
    --fs-xs:14px;

    /* ======================================================
       FONT WEIGHTS
    ====================================================== */

    --fw-regular:400;
    --fw-medium:500;
    --fw-semibold:600;
    --fw-bold:700;
    --fw-extrabold:800;

    /* ======================================================
       LINE HEIGHT
    ====================================================== */

    --lh-tight:1.15;
    --lh-heading:1.25;
    --lh-body:1.8;

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

    --ls-tight:-0.03em;
    --ls-normal:0;
    --ls-wide:0.05em;

    /* ======================================================
       LAYOUT
    ====================================================== */

    --container:1200px;
    --container-wide:1320px;
    --container-narrow:900px;

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

    --section-space:80px;
    --section-space-tablet:64px;
    --section-space-mobile:48px;

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

    --space-2xs:4px;
    --space-xs:8px;
    --space-sm:16px;
    --space-md:24px;
    --space-lg:32px;
    --space-xl:48px;
    --space-2xl:64px;
    --space-3xl:80px;
    --space-4xl:100px;

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

    --card-padding:32px;
    --card-gap:30px;

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

    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:18px;
    --radius-xl:24px;
    --radius-round:999px;

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

    --shadow-xs:
        0 2px 8px rgba(15,23,42,.04);

    --shadow-sm:
        0 6px 18px rgba(15,23,42,.05);

    --shadow-md:
        0 12px 30px rgba(15,23,42,.08);

    --shadow-lg:
        0 20px 45px rgba(15,23,42,.12);

    --shadow-xl:
        0 28px 60px rgba(15,23,42,.16);

    /* ======================================================
       BORDERS
    ====================================================== */

    --border-thin:1px;
    --border-medium:2px;
    --border-thick:3px;

    /* ======================================================
       Z-INDEX
    ====================================================== */

    --z-base:1;
    --z-header:100;
    --z-dropdown:200;
    --z-sticky:300;
    --z-overlay:900;
    --z-modal:1000;
    --z-toast:1100;
    --z-tooltip:1200;

    /* ======================================================
       TRANSITIONS
    ====================================================== */

    --transition-fast:.2s ease;
    --transition:.3s ease;
    --transition-slow:.45s ease;

    /* ======================================================
       EASING
    ====================================================== */

    --ease-standard:cubic-bezier(.4,0,.2,1);
    --ease-emphasized:cubic-bezier(.2,.8,.2,1);
    --ease-bounce:cubic-bezier(.34,1.56,.64,1);

}