/* =========================================================================
   TKT PUMPS · DESIGN TOKENS · v2.0 LIQUID GLASS
   Single source of truth — DO NOT invent values outside this file.
   Every component, page and AI agent must consume these variables.
   ========================================================================= */

:root {
  /* ───────────────────────────────────────────────────────────────────────
     1. COLOR · BRAND
     ─────────────────────────────────────────────────────────────────────── */

  /* Blue · primary brand spectrum */
  --tkt-blue-900: #001A3D;    /* darkest — footer bg, deep ink */
  --tkt-blue-800: #002B5C;    /* hero ink, dark nav */
  --tkt-blue-700: #003E80;    /* heading on light */
  --tkt-blue-600: #005090;    /* PRIMARY BRAND · links, eyebrow */
  --tkt-blue-500: #1A6FB8;    /* accent · graph, stats */
  --tkt-blue-400: #2D8DE0;    /* aurora highlight */
  --tkt-blue-300: #5BAEF5;    /* glass tint, mega menu accent */
  --tkt-blue-200: #A8D2F7;    /* aurora soft */
  --tkt-blue-100: #DDEBFA;    /* hero gradient stop */
  --tkt-blue-050: #F0F6FD;    /* surface tint */

  /* Orange · ACTION ONLY (never decorative) */
  --tkt-orange-900: #8C3D00;
  --tkt-orange-700: #B85800;
  --tkt-orange-600: #E07000;  /* CTA solid */
  --tkt-orange-500: #FF8C1F;
  --tkt-orange-400: #FFA040;  /* CTA gradient stop top */
  --tkt-orange-200: #FFCD99;
  --tkt-orange-100: #FFE3C2;
  --tkt-orange-050: #FFF3E6;

  /* ───────────────────────────────────────────────────────────────────────
     2. COLOR · SEMANTIC (status & feedback)
     ─────────────────────────────────────────────────────────────────────── */
  --semantic-success:    #1F8A5B;
  --semantic-success-bg: rgba(34,134,87,0.12);
  --semantic-warn:       #B45309;
  --semantic-warn-bg:    rgba(180,83,9,0.10);
  --semantic-danger:     #B83447;
  --semantic-danger-bg:  rgba(184,52,71,0.10);
  --semantic-info:       var(--tkt-blue-600);
  --semantic-info-bg:    rgba(0,80,144,0.10);

  /* ───────────────────────────────────────────────────────────────────────
     3. COLOR · SURFACE (light canvas only — system is light by default)
     ─────────────────────────────────────────────────────────────────────── */
  --bg-canvas:   #F4F7FB;   /* page background */
  --bg-tint:     #EAF1F9;   /* section divider */
  --bg-pure:     #FFFFFF;   /* card */
  --bg-elev:     #FAFCFE;   /* raised card */
  --bg-dark:     #001A3D;   /* footer / inverted */

  /* ───────────────────────────────────────────────────────────────────────
     4. COLOR · FOREGROUND (4-step opacity ramp, Vietnamese-readable)
     ─────────────────────────────────────────────────────────────────────── */
  --fg-1: #0A1A33;                       /* primary text */
  --fg-2: rgba(10,26,51,0.74);           /* secondary */
  --fg-3: rgba(10,26,51,0.54);           /* tertiary, captions */
  --fg-4: rgba(10,26,51,0.36);           /* disabled */
  --fg-on-dark-1: rgba(255,255,255,0.96);
  --fg-on-dark-2: rgba(255,255,255,0.78);
  --fg-on-dark-3: rgba(255,255,255,0.54);
  --fg-on-dark-4: rgba(255,255,255,0.36);

  /* ───────────────────────────────────────────────────────────────────────
     5. GLASS PRIMITIVE (the SIGNATURE — use sparingly: only nav, modal,
        hero badge, key stat, CTA card, mega menu. NEVER on dense content.)
     ─────────────────────────────────────────────────────────────────────── */
  --glass-fill:        rgba(255,255,255,0.62);
  --glass-fill-hi:     rgba(255,255,255,0.82);
  --glass-fill-tint:   rgba(220,235,250,0.55);
  --glass-stroke:      rgba(255,255,255,0.85);
  --glass-stroke-edge: rgba(0,80,144,0.08);
  --glass-spec:        rgba(255,255,255,0.95);
  --glass-blur:        28px;
  --glass-sat:         180%;
  /* Dark surface glass (used inside .footer, dark hero, etc.) */
  --glass-dark-fill:   rgba(255,255,255,0.06);
  --glass-dark-stroke: rgba(255,255,255,0.14);

  /* ───────────────────────────────────────────────────────────────────────
     6. TYPOGRAPHY (declared in fonts.css; tokens here are scale & weight)
     ─────────────────────────────────────────────────────────────────────── */
  --font-display: "SVN-Avant Garde Gothic", "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --font-body:    "SVN-Avant Garde Gothic", "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Display scale (px) — desktop reference, fluid clamping applied in base.css */
  --t-display-1: 128px;
  --t-display-2: 96px;
  --t-title-1:   72px;
  --t-title-2:   56px;
  --t-title-3:   40px;
  --t-heading-1: 28px;
  --t-heading-2: 22px;
  --t-heading-3: 18px;
  --t-body-lg:   18px;
  --t-body:      16px;
  --t-body-sm:   14px;
  --t-caption:   12px;
  --t-eyebrow:   11px;
  --t-mono:      13px;
  --t-micro:     10px;

  /* Weights */
  --w-light:    300;
  --w-book:     400;
  --w-medium:   500;
  --w-demi:     600;
  --w-bold:     700;

  /* Letter spacing presets */
  --ls-display: -0.025em;
  --ls-title:   -0.018em;
  --ls-heading: -0.008em;
  --ls-body:     0;
  --ls-eyebrow:  0.22em;
  --ls-mono:     0.01em;

  /* ───────────────────────────────────────────────────────────────────────
     7. SPACING · 4-pt scale (USE THESE — never raw px in components)
     ─────────────────────────────────────────────────────────────────────── */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;
  --s-13: 128px;

  /* ───────────────────────────────────────────────────────────────────────
     8. RADIUS
     ─────────────────────────────────────────────────────────────────────── */
  --r-2:   2px;
  --r-4:   4px;
  --r-8:   8px;
  --r-12:  12px;   /* input, small card */
  --r-16:  16px;   /* card */
  --r-20:  20px;   /* large card */
  --r-24:  24px;   /* glass card, mega menu */
  --r-28:  28px;
  --r-32:  32px;
  --r-pill: 999px; /* button, nav pill, chip */

  /* ───────────────────────────────────────────────────────────────────────
     9. ELEVATION · 6-step shadow ramp (light surface)
     ─────────────────────────────────────────────────────────────────────── */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(0,40,80,0.05), 0 1px 1px rgba(0,40,80,0.04);
  --elev-2: 0 4px 8px -2px rgba(0,40,80,0.08), 0 2px 4px -1px rgba(0,40,80,0.04);
  --elev-3: 0 12px 24px -6px rgba(0,40,80,0.12), 0 4px 8px -2px rgba(0,40,80,0.06);
  --elev-4: 0 24px 48px -12px rgba(0,40,80,0.18), 0 8px 16px -4px rgba(0,40,80,0.08);
  --elev-5: 0 40px 80px -16px rgba(0,40,80,0.24), 0 16px 32px -8px rgba(0,40,80,0.10);
  /* Glass-specific elevation (inset highlight) */
  --elev-glass:    0 12px 32px rgba(0,40,80,0.10), inset 0 1px 0 rgba(255,255,255,0.95);
  --elev-glass-hi: 0 24px 60px -8px rgba(0,40,80,0.20), inset 0 1px 0 rgba(255,255,255,0.95);
  /* CTA primary shadow (orange) */
  --elev-cta:        0 8px 20px rgba(224,112,0,0.38), inset 0 1px 0 rgba(255,255,255,0.45);
  --elev-cta-hover:  0 14px 30px rgba(224,112,0,0.50), inset 0 1px 0 rgba(255,255,255,0.55);

  /* ───────────────────────────────────────────────────────────────────────
     10. MOTION · easing + duration
     ─────────────────────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-1:  120ms;   /* micro-interactions */
  --dur-2:  200ms;   /* button hover, fade */
  --dur-3:  320ms;   /* card lift */
  --dur-4:  480ms;   /* modal, mega menu */
  --dur-5:  720ms;   /* page transitions */

  /* ───────────────────────────────────────────────────────────────────────
     11. LAYOUT · grid + container
     ─────────────────────────────────────────────────────────────────────── */
  --container-max: 1440px;
  --container-pad-desktop: 48px;
  --container-pad-tablet:  32px;
  --container-pad-mobile:  20px;
  --grid-cols: 12;
  --grid-gap-desktop: 32px;
  --grid-gap-mobile:  16px;

  /* Heights */
  --h-nav:      72px;   /* full glass bar height */
  --h-nav-pill: 64px;   /* floating pill height */
  --h-util:     38px;   /* utility strip */

  /* Z-INDEX scale */
  --z-base:       0;
  --z-raised:     10;
  --z-sticky:     100;
  --z-overlay:    500;
  --z-modal:      1000;
  --z-toast:      2000;
  --z-tooltip:    3000;

  /* Breakpoints (reference; use in media queries) */
  /* --bp-sm: 640px;
     --bp-md: 768px;
     --bp-lg: 1024px;
     --bp-xl: 1280px;
     --bp-2xl: 1440px; */
}