/* WAVY design tokens — the single source for colour, type, space, shape, depth and motion. */
:root {
  /* brand */
  --ink: #17213B;          /* Midnight Ink: trust, text, dark surfaces */
  --blue: #3F5CE8;         /* Wavy Blue: primary action */
  --blue-press: #2F49CC;
  --ice: #DDF4FA;          /* Soft Ice */
  --lilac: #B9B4FF;        /* Cool Lilac */
  --cloud: #F8F7F3;        /* Cloud: page background */
  --white: #FFFFFF;

  /* derived */
  --ink-2: #3C4663;        /* secondary text on light (AA on cloud) */
  --ink-3: #5B647D;        /* tertiary text (AA on white / cloud) */
  --line: #E6E4EC;
  --line-strong: #D3D1DE;
  --ice-50: #EEF9FC;
  --lilac-50: #F1F0FF;
  --blue-50: #ECEFFD;
  --ok: #1F7A55;           /* status: available */
  --ok-bg: #E4F4EC;
  --warn: #8A5300;         /* status: by order / last lot */
  --warn-bg: #FFF1D6;
  --stop: #9B2C2C;         /* status: EOL */
  --stop-bg: #FBE7E7;
  --deal: #C2410C;         /* savings text (AA on white) */
  --deal-bg: #FFEDE3;
  --focus: #3F5CE8;

  /* type */
  --font: "Inter", "Sarabun", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-th: "Sarabun", "Inter", system-ui, sans-serif;
  --font-display: "Prompt", "Inter", system-ui, sans-serif; /* headings, product names, prices */
  --page: #FFFFFF;          /* product-first white page (Cloud stays for quiet panels) */
  --price: var(--ink);
  --sale: #C2410C;          /* sale price: 5.2:1 on white, white text 5.2:1 on it */
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --fs-hero: clamp(2.5rem, 1.4rem + 5vw, 5.25rem);

  /* space (4px grid) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px;
  --gutter: 16px;
  --maxw: 1320px;

  /* shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* depth */
  --sh-1: 0 1px 2px rgba(23, 33, 59, .05), 0 4px 14px rgba(23, 33, 59, .05);
  --sh-2: 0 2px 4px rgba(23, 33, 59, .05), 0 14px 34px rgba(23, 33, 59, .10);
  --sh-3: 0 24px 64px rgba(23, 33, 59, .20);

  /* motion */
  --t-fast: 180ms;
  --t-med: 280ms;
  --t-slow: 450ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* layers */
  --z-header: 30;
  --z-tray: 40;
  --z-sticky-cta: 35;
  --z-toast: 60;

  /* fixed elements at the bottom of the viewport push the compare tray up */
  --bottom-offset: 0px;
  --tap: 44px;
}

@media (min-width: 768px) {
  :root { --gutter: 24px; }
}
@media (min-width: 1280px) {
  :root { --gutter: 40px; }
}