/* ================================================================
   MILLS NUTRIENTS THAILAND — DESIGN TOKENS
   Brand DNA: punk industrial, Dutch-confident, serious-not-corporate.
   Navy outline + red stamp + cream/white grounds = Mills signature.
   ================================================================ */

:root {
  /* ---------- COLOUR ---------- */
  /* Primary ink — matches Mills logo outline */
  --ink:              #131F37;
  --ink-80:           rgba(19, 31, 55, .80);
  --ink-60:           rgba(19, 31, 55, .60);
  --ink-30:           rgba(19, 31, 55, .30);
  --ink-10:           rgba(19, 31, 55, .10);

  /* Mills stamp red */
  --red:              #E42128;
  --red-deep:         #B81820;
  --red-soft:         #F4E4E4;

  /* Grounds */
  --cream:            #F6F1E6;   /* warm default bg */
  --cream-deep:       #ECE3CC;   /* sand contrast section */
  --white:            #FFFFFF;
  --stone:            #8E8579;   /* muted warm grey — captions */
  --charcoal:         #1A1A1A;

  /* Green accent — used ONLY for "in stock / available" micro-signals.
     Deliberately desaturated so we don't drift into generic eco-bio territory. */
  --green-live:       #2E7D4F;
  --green-soft:       #E1EDE4;

  /* Feedback semantics */
  --ok:               var(--green-live);
  --alert:            #C24A00;

  /* ---------- TYPOGRAPHY ---------- */
  /* Kanit = Thai-native, chunky weights, echoes Mills wordmark mass.
     IBM Plex Sans = industrial/engineered body; Thai + Vietnamese co-designed.
     Alfa Slab One = slab display, echoes "PAYS THE BILLS" tagline lockup. */
  --font-display:     "Kanit", "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-slab:        "Alfa Slab One", "Kanit", Georgia, serif;
  --font-body:        "IBM Plex Sans", "IBM Plex Sans Thai", "Kanit", system-ui, sans-serif;
  --font-mono:        "IBM Plex Mono", "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* Type scale — built on a 1.250 major third. Biased toward BIG display sizes.
     Feedback: "no AI slop" → oversized type, strong hierarchy. */
  --fs-xs:            0.75rem;     /* 12px */
  --fs-sm:            0.875rem;    /* 14px */
  --fs-base:          1rem;        /* 16px */
  --fs-md:            1.125rem;    /* 18px */
  --fs-lg:            1.375rem;    /* 22px */
  --fs-xl:            1.75rem;     /* 28px */
  --fs-2xl:           2.25rem;     /* 36px */
  --fs-3xl:           3rem;        /* 48px */
  --fs-4xl:           4rem;        /* 64px */
  --fs-5xl:           5.5rem;      /* 88px */
  --fs-6xl:           7.5rem;      /* 120px */

  --lh-tight:         1.02;
  --lh-snug:          1.15;
  --lh-normal:        1.4;
  --lh-relaxed:       1.6;

  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-ultra:   0.14em;

  /* ---------- SPACING ---------- */
  --space-1:          0.25rem;     /*  4 */
  --space-2:          0.5rem;      /*  8 */
  --space-3:          0.75rem;     /* 12 */
  --space-4:          1rem;        /* 16 */
  --space-5:          1.5rem;      /* 24 */
  --space-6:          2rem;        /* 32 */
  --space-7:          3rem;        /* 48 */
  --space-8:          4rem;        /* 64 */
  --space-9:          6rem;        /* 96 */
  --space-10:         8rem;        /* 128 */
  --space-11:         12rem;       /* 192 */

  /* ---------- LAYOUT ---------- */
  --container:        min(1280px, 92vw);
  --container-tight:  min(880px, 92vw);
  --container-wide:   min(1440px, 96vw);
  --gutter:           var(--space-5);

  /* ---------- RADII ---------- */
  --r-0:              0;
  --r-sm:             4px;
  --r-md:             8px;
  --r-lg:             16px;
  --r-pill:           999px;

  /* ---------- BORDERS ---------- */
  --stroke-hair:      1px;
  --stroke-thin:      2px;
  --stroke-thick:     3px;
  --stroke-chunk:     4px;     /* Mills logo outline weight */

  /* ---------- SHADOWS ---------- */
  /* Kept minimal — brand is flat & confident, not skeuomorphic. */
  --shadow-card:      0 12px 32px -12px rgba(19, 31, 55, .22);
  --shadow-lift:      0 24px 56px -20px rgba(19, 31, 55, .28);

  /* ---------- MOTION ---------- */
  --ease-out:         cubic-bezier(.2, .7, .2, 1);
  --ease-in-out:      cubic-bezier(.65, 0, .35, 1);
  --d-fast:           140ms;
  --d-med:            280ms;
  --d-slow:           520ms;

  /* ---------- Z ---------- */
  --z-nav:            100;
  --z-dropdown:       150;
  --z-modal:          200;
  --z-toast:          300;
}

/* Cross-language substitutions. Kanit handles Thai; Inter handles Vietnamese.
   We pin specific stacks per language for crisper rendering. */
html[lang="th"], [data-lang="th"] {
  --font-body:        "Kanit", "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif;
}
html[lang="vi"], [data-lang="vi"] {
  --font-body:        "Be Vietnam Pro", "Inter", system-ui, sans-serif;
  --font-display:     "Be Vietnam Pro", "Kanit", "Inter", system-ui, sans-serif;
}