/* =========================================================================
   WINKO — DESIGN TOKENS
   Brand: Winko — King-Hor Supply Chain's name in Vietnam (since 2015)
   ========================================================================= */

:root {
  /* -----------------------------------------------------------------------
     COLOR — Brand
     ----------------------------------------------------------------------- */
  --color-brand-blue:        #0000FF;   /* Winko signature blue */
  --color-brand-blue-700:    #0008C2;   /* Hover / active */
  --color-brand-blue-800:    #000B96;   /* Pressed */
  --color-brand-blue-900:    #000666;   /* Section bg */
  --color-brand-blue-950:    #00033B;   /* Deep night */
  --color-brand-yellow:      #FCEE21;   /* Winko accent yellow */
  --color-brand-yellow-600:  #E0CC00;   /* Yellow hover */

  /* Soft tints */
  --color-brand-blue-50:     #EEF0FF;
  --color-brand-blue-100:    #DCE0FF;
  --color-brand-blue-200:    #B4BDFF;

  /* -----------------------------------------------------------------------
     COLOR — Neutrals (professional cool gray scale)
     ----------------------------------------------------------------------- */
  --color-ink:               #0A0F2C;   /* Body text */
  --color-ink-soft:          #1E2748;   /* Headings dark surfaces */
  --color-slate:             #334155;   /* Secondary text */
  --color-mute:              #64748B;   /* Tertiary, captions */
  --color-mute-soft:         #94A3B8;
  --color-hairline:          #E2E8F0;   /* Borders, dividers */
  --color-hairline-soft:     #EEF2F7;
  --color-bg:                #F8FAFC;   /* Page bg */
  --color-bg-warm:           #F4F6FB;
  --color-surface:           #FFFFFF;   /* Cards */
  --color-overlay:           rgba(10,15,44,0.6);

  /* Semantic */
  --color-success:           #059669;
  --color-warn:              #D97706;
  --color-danger:            #DC2626;

  /* -----------------------------------------------------------------------
     TYPOGRAPHY
     ----------------------------------------------------------------------- */
  --font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Fluid type scale (clamp: min .. preferred .. max) */
  --fs-xs:   clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);   /* 12 → 13 */
  --fs-sm:   clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);  /* 13 → 14 */
  --fs-base: clamp(0.9375rem, 0.91rem + 0.16vw, 1rem);      /* 15 → 16 */
  --fs-md:   clamp(1rem, 0.96rem + 0.2vw, 1.125rem);        /* 16 → 18 */
  --fs-lg:   clamp(1.125rem, 1.07rem + 0.27vw, 1.25rem);    /* 18 → 20 */
  --fs-xl:   clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);      /* 20 → 24 */
  --fs-2xl:  clamp(1.5rem, 1.36rem + 0.7vw, 1.875rem);      /* 24 → 30 */
  --fs-3xl:  clamp(1.875rem, 1.67rem + 1vw, 2.5rem);        /* 30 → 40 */
  --fs-4xl:  clamp(2.25rem, 1.93rem + 1.6vw, 3.25rem);      /* 36 → 52 */
  --fs-5xl:  clamp(2.75rem, 2.2rem + 2.7vw, 4.5rem);        /* 44 → 72 */
  --fs-6xl:  clamp(3.25rem, 2.5rem + 3.7vw, 5.5rem);        /* 52 → 88 */

  --lh-tight:  1.08;
  --lh-snug:   1.2;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  --tracking-tight: -0.022em;
  --tracking-snug:  -0.012em;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.14em;

  /* -----------------------------------------------------------------------
     SPACING — 8pt grid
     ----------------------------------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-28:  112px;
  --space-32:  128px;
  --space-40:  160px;

  /* Section vertical padding (responsive) */
  --pad-section-y: clamp(56px, 6vw, 120px);
  --pad-section-y-lg: clamp(72px, 8vw, 160px);

  /* -----------------------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------------------- */
  --max-w:        1280px;
  --max-w-wide:   1440px;
  --max-w-prose:  68ch;
  --pad-page-x:   clamp(20px, 4vw, 56px);

  --nav-h:        72px;
  --nav-h-mobile: 64px;

  /* -----------------------------------------------------------------------
     RADIUS & SHADOWS
     ----------------------------------------------------------------------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(10,15,44,0.05);
  --shadow-sm: 0 2px 6px rgba(10,15,44,0.06), 0 1px 2px rgba(10,15,44,0.04);
  --shadow-md: 0 8px 24px rgba(10,15,44,0.08), 0 2px 6px rgba(10,15,44,0.05);
  --shadow-lg: 0 20px 50px rgba(10,15,44,0.12), 0 4px 12px rgba(10,15,44,0.06);
  --shadow-xl: 0 40px 80px rgba(0,0,255,0.16), 0 8px 20px rgba(10,15,44,0.08);
  --shadow-brand: 0 16px 40px rgba(0,0,255,0.24);

  /* -----------------------------------------------------------------------
     MOTION
     ----------------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   400ms;
  --dur-slower: 700ms;

  /* -----------------------------------------------------------------------
     Z-INDEX
     ----------------------------------------------------------------------- */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-nav:     200;
  --z-overlay: 800;
  --z-modal:   900;
  --z-toast:   1000;
}

/* Accessible reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}