/* =========================================================
   ZANCK — DESIGN SYSTEM VARIABLES
   File: assets/css/variables.css

   Central design tokens for the entire website.
   All global CSS files should reference these variables
   instead of hard-coding repeated values.
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

:root {

    /* -----------------------------------------------------
       BRAND
       ----------------------------------------------------- */

    --color-primary: #1e6dbb;
    --color-primary-dark: #185796;
    --color-primary-light: #edf5fc;

    --color-secondary: #0b1220;

    --color-accent: #1e6dbb;


    /* -----------------------------------------------------
       BACKGROUNDS
       ----------------------------------------------------- */

    --color-background: #ffffff;
    --color-background-soft: #f7f8fa;
    --color-background-muted: #f1f3f6;

    --color-surface: #ffffff;
    --color-surface-soft: #f8f9fb;

    --color-background-dark: #080b12;
    --color-background-dark-soft: #10141d;


    /* -----------------------------------------------------
       TEXT
       ----------------------------------------------------- */

    --color-text-primary: #0b0d12;
    --color-text-secondary: #5f6368;
    --color-text-tertiary: #7b8088;

    --color-text-inverse: #ffffff;
    --color-text-inverse-muted: rgba(255, 255, 255, 0.68);


    /* -----------------------------------------------------
       BORDERS
       ----------------------------------------------------- */

    --color-border: #e6e8ec;
    --color-border-light: #eef0f3;
    --color-border-dark: #252b36;

    --color-border-focus: var(--color-primary);


    /* -----------------------------------------------------
       STATUS COLORS
       ----------------------------------------------------- */

    --color-success: #16834b;
    --color-warning: #b7791f;
    --color-error: #c53030;
    --color-info: #2563eb;


    /* -----------------------------------------------------
       TYPOGRAPHY — FONT FAMILIES
       ----------------------------------------------------- */

    --font-primary:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-mono:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;


    /* -----------------------------------------------------
       TYPOGRAPHY — WEIGHTS
       ----------------------------------------------------- */

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;


    /* -----------------------------------------------------
       TYPOGRAPHY — FONT SIZES
       ----------------------------------------------------- */

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;

    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;
    --font-size-7xl: 4.5rem;
    --font-size-8xl: 6rem;


    /* -----------------------------------------------------
       TYPOGRAPHY — LINE HEIGHT
       ----------------------------------------------------- */

    --line-height-none: 1;
    --line-height-tight: 1.1;
    --line-height-snug: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;
    --line-height-loose: 1.9;


    /* -----------------------------------------------------
       TYPOGRAPHY — LETTER SPACING
       ----------------------------------------------------- */

    --tracking-tighter: -0.06em;
    --tracking-tight: -0.04em;
    --tracking-normal: 0;
    --tracking-wide: 0.04em;
    --tracking-wider: 0.08em;
    --tracking-widest: 0.14em;


    /* -----------------------------------------------------
       SPACING
       ----------------------------------------------------- */

    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 36px;
    --space-10: 40px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-28: 112px;
    --space-32: 128px;
    --space-40: 160px;


    /* -----------------------------------------------------
       LAYOUT
       ----------------------------------------------------- */

    --container-width: 1440px;
    --container-width-wide: 1600px;
    --container-width-narrow: 960px;

    --container-padding: 32px;

    --header-height: 84px;
    --header-height-mobile: 72px;


    /* -----------------------------------------------------
       BORDER RADIUS
       ----------------------------------------------------- */

    --radius-none: 0;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;


    /* -----------------------------------------------------
       SHADOWS
       ----------------------------------------------------- */

    --shadow-xs:
        0 1px 2px rgba(0, 0, 0, 0.04);

    --shadow-sm:
        0 4px 12px rgba(0, 0, 0, 0.06);

    --shadow-md:
        0 10px 30px rgba(0, 0, 0, 0.08);

    --shadow-lg:
        0 20px 50px rgba(0, 0, 0, 0.12);

    --shadow-xl:
        0 30px 80px rgba(0, 0, 0, 0.16);

    --shadow-primary:
        0 20px 60px rgba(30, 109, 187, 0.16);


    /* -----------------------------------------------------
       TRANSITIONS
       ----------------------------------------------------- */

    --transition-fast:
        150ms ease;

    --transition-base:
        250ms ease;

    --transition-slow:
        400ms ease;

    --transition-slower:
        700ms ease;

    --transition-transform:
        transform 250ms cubic-bezier(0.22, 1, 0.36, 1);

    --transition-all:
        all 250ms cubic-bezier(0.22, 1, 0.36, 1);


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

    --z-base: 1;
    --z-content: 10;
    --z-header: 100;
    --z-dropdown: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;


    /* -----------------------------------------------------
       BREAKPOINTS
       ----------------------------------------------------- */

    --breakpoint-xs: 480px;
    --breakpoint-sm: 600px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1440px;


    /* -----------------------------------------------------
       MOTION
       ----------------------------------------------------- */

    --ease-standard:
        cubic-bezier(0.22, 1, 0.36, 1);

    --ease-in:
        cubic-bezier(0.4, 0, 1, 1);

    --ease-out:
        cubic-bezier(0, 0, 0.2, 1);

    --ease-in-out:
        cubic-bezier(0.4, 0, 0.2, 1);


    /* -----------------------------------------------------
       OPACITY
       ----------------------------------------------------- */

    --opacity-disabled: 0.45;
    --opacity-muted: 0.65;
    --opacity-subtle: 0.8;
    --opacity-full: 1;


    /* -----------------------------------------------------
       FOCUS
       ----------------------------------------------------- */

    --focus-ring:
        0 0 0 3px rgba(30, 109, 187, 0.24);


    /* -----------------------------------------------------
       GRADIENTS
       ----------------------------------------------------- */

    --gradient-primary:
        linear-gradient(
            135deg,
            #1e6dbb 0%,
            #4b8ac9 100%
        );

    --gradient-dark:
        linear-gradient(
            135deg,
            #080b12 0%,
            #111722 100%
        );

    --gradient-soft:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f5f7fb 100%
        );


    /* -----------------------------------------------------
       OVERLAYS
       ----------------------------------------------------- */

    --overlay-light:
        rgba(255, 255, 255, 0.08);

    --overlay-medium:
        rgba(255, 255, 255, 0.14);

    --overlay-dark:
        rgba(0, 0, 0, 0.08);

    --overlay-primary:
        rgba(30, 109, 187, 0.08);
}


/* =========================================================
   DARK THEME TOKENS
   ========================================================= */

[data-theme="dark"] {

    --color-background: #080b12;
    --color-background-soft: #10141d;
    --color-background-muted: #161b24;

    --color-surface: #10141d;
    --color-surface-soft: #151a23;

    --color-text-primary: #ffffff;
    --color-text-secondary: #a7adb7;
    --color-text-tertiary: #7d8490;

    --color-text-inverse: #0b0d12;
    --color-text-inverse-muted: rgba(0, 0, 0, 0.62);

    --color-border: #252b36;
    --color-border-light: #1d232d;
    --color-border-dark: #343b47;

    --gradient-soft:
        linear-gradient(
            135deg,
            #10141d 0%,
            #151a23 100%
        );
}


/* =========================================================
   HIGH CONTRAST
   ========================================================= */

@media (prefers-contrast: more) {

    :root {

        --color-text-secondary: #3d4148;
        --color-text-tertiary: #4d525a;

        --color-border: #c7cbd1;
        --color-border-light: #d7dae0;

        --focus-ring:
            0 0 0 4px rgba(30, 109, 187, 0.4);
    }

    [data-theme="dark"] {

        --color-text-secondary: #d2d6dc;
        --color-text-tertiary: #b9bec7;

        --color-border: #626a76;
        --color-border-light: #4d5561;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    :root {

        --transition-fast: none;
        --transition-base: none;
        --transition-slow: none;
        --transition-slower: none;

        --transition-transform: none;
        --transition-all: none;
    }
}