/* ============================================================
   DESIGN TOKENS — HuySoftware License Manager
   Single source of truth for color, type, space, motion.
   Extracted from shajon_style/ template, tuned for B2B tool clarity.
   ============================================================ */

:root {
    /* Tells browser to render native UI (dropdowns, scrollbars, file pickers,
       date inputs, etc.) in dark mode. Without this, <select> option list
       renders white-on-white on dark backgrounds. */
    color-scheme: dark;

    /* ----- COLOR ----- */

    /* Surfaces — Round 4 §1.1: boosted +5 lightness for higher contrast on
       dark bg. Previous values (#12141c / #1a1d28 / #21253344) gave only
       ~10-15 delta from bg → cards blended together, mỏi mắt. */
    --bg:           #08090d;
    --bg-2:         #0c0e14;
    --surface:      #161924;     /* was #12141c */
    --surface-2:    #1f2330;     /* was #1a1d28 */
    --surface-3:    #2a2f4055;   /* was #21253344 — bumped + alpha */

    /* Accent — pastel sky-blue (single theme, no picker) */
    --accent:        #ACCDFF;
    --accent-bright: #D4E4FF;
    --accent-soft:   #E8F0FF;
    --accent-dark:   #6F8FCC;
    --accent-glow:   rgba(172, 205, 255, 0.55);
    --accent-bg:     rgba(172, 205, 255, 0.12);

    /* Borders — Round 4: bumped to make card edges visible */
    --border:        rgba(172, 205, 255, 0.30);    /* was 0.22 */
    --border-strong: rgba(172, 205, 255, 0.55);    /* was 0.45 */
    --border-soft:   rgba(255, 255, 255, 0.08);    /* was 0.06 */

    /* Text — Round 4: -muted/-dim bumped for readability on new surface */
    --text:       #f3f6fc;
    --text-muted: #d0d8e6;       /* was #c5cdda */
    --text-dim:   #95a0b8;       /* was #8a93a8 */
    --text-faint: #5a6070;

    /* Semantic — for status badges, toasts, validation */
    --success:    #4ade80;   /* online, success toast */
    --success-bg: rgba(74, 222, 128, 0.12);
    --warning:    #fbbf24;   /* expiring soon */
    --warning-bg: rgba(251, 191, 36, 0.12);
    --danger:     #ff6680;   /* expired, locked, error */
    --danger-bg:  rgba(255, 102, 128, 0.12);
    --info:       #22d3ee;   /* informational */
    --info-bg:    rgba(34, 211, 238, 0.12);

    /* Gradients */
    --grad-accent: linear-gradient(135deg, #D4E4FF 0%, #ACCDFF 50%, #6F8FCC 100%);
    --grad-bg:     radial-gradient(800px at 15% 10%, rgba(172, 205, 255, 0.05), transparent 60%);

    /* Shadows / glows */
    --shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg:  0 20px 50px -10px rgba(0, 0, 0, 0.6);
    --glow:       0 0 24px rgba(172, 205, 255, 0.32);
    --glow-strong:0 0 40px rgba(172, 205, 255, 0.5);


    /* ----- TYPOGRAPHY (utopia.fyi fluid scale) ----- */

    --font-sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Fira Code", ui-monospace, "Cascadia Code", monospace;

    /* Body & UI text */
    --fs-xs:    clamp(0.75rem,  0.71rem + 0.20vw, 0.875rem);   /* 12 → 14 */
    --fs-sm:    clamp(0.875rem, 0.83rem + 0.23vw, 1rem);       /* 14 → 16 */
    --fs-base:  clamp(0.95rem,  0.91rem + 0.23vw, 1.125rem);   /* 15 → 18 */
    --fs-md:    clamp(1.0625rem,1rem + 0.31vw,    1.25rem);    /* 17 → 20 */
    --fs-lg:    clamp(1.25rem,  1.10rem + 0.78vw, 1.75rem);    /* 20 → 28 */

    /* Display / headings */
    --fs-h3:      clamp(1.375rem, 1rem    + 1.88vw, 2.75rem);  /* 22 → 44 */
    --fs-h2:      clamp(1.625rem, 1rem    + 3.13vw, 4rem);     /* 26 → 64 */
    --fs-h1:      clamp(1.75rem,  0.5rem  + 6.25vw, 6rem);     /* 28 → 96 */
    --fs-display: clamp(1.625rem, 0.5rem + 6.25vw, 8rem);      /* 26 → 128 */

    /* Line-height */
    --lh-tight: 1.1;
    --lh-snug:  1.25;
    --lh-base:  1.5;
    --lh-loose: 1.75;


    /* ----- SPACING (math-derived fluid scale) ----- */

    --space-3xs: clamp(0.25rem,  0.23rem + 0.08vw, 0.3125rem);  /* 4 → 5 */
    --space-2xs: clamp(0.5rem,   0.45rem + 0.23vw, 0.625rem);   /* 8 → 10 */
    --space-xs:  clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);   /* 12 → 14 */
    --space-s:   clamp(1rem,     0.91rem + 0.47vw, 1.25rem);    /* 16 → 20 */
    --space-m:   clamp(1.5rem,   1.32rem + 0.94vw, 2rem);       /* 24 → 32 */
    --space-l:   clamp(2rem,     1.55rem + 2.34vw, 3.25rem);    /* 32 → 52 */
    --space-xl:  clamp(2.5rem,   1.5rem  + 5vw,    5rem);       /* 40 → 80 */
    --space-2xl: clamp(3.5rem,   2.27rem + 6.13vw, 6.75rem);    /* 56 → 108 */
    --space-3xl: clamp(5rem,     3.27rem + 8.62vw, 9.5rem);     /* 80 → 152 */

    /* Inline gutter — viewport edge spacing */
    --pad-inline: clamp(1rem, 0.5rem + 2.5vw, 1.75rem);         /* 16 → 28 */


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

    --container:    1280px;
    --container-narrow: 720px;   /* article-width content */

    --radius-sm: 6px;
    --radius:    10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;


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

    --ease:       cubic-bezier(0.22, 1, 0.36, 1);          /* default ease-out */
    --ease-in:    cubic-bezier(0.5, 0, 0.75, 0);           /* sharp in */
    --ease-back:  cubic-bezier(0.34, 1.56, 0.64, 1);       /* slight overshoot */
    --ease-out:   cubic-bezier(0, 0, 0.2, 1);              /* material out */

    --dur-fast: 0.15s;
    --dur-base: 0.25s;
    --dur-slow: 0.5s;


    /* ----- Z-INDEX scale ----- */
    --z-bg:        -1;
    --z-base:       0;
    --z-content:    1;
    --z-nav:      100;
    --z-overlay: 9000;
    --z-modal:   9500;
    --z-toast:   9700;
    --z-cursor:  9999;
}

/* Container cap on big monitors */
@media (min-width: 1600px) { :root { --container: 1400px; } }
@media (min-width: 2200px) { :root { --container: 1600px; } }

/* Reduced motion — disable all transitions for accessibility */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0.001s;
        --dur-base: 0.001s;
        --dur-slow: 0.001s;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}