/* Design tokens: the ONLY place raw colour/size values may appear.
   Every other stylesheet uses var(--token). Change the look of the whole site here.
   Brand: edit --brand-h (hue) / --brand-c (chroma) to re-theme in one line. */
:root {
  color-scheme: light dark;
  --brand-navy: #0F2044;
  --brand-yellow: #F5C518;
  --brand-h: 255;
  --brand-c: 0.16;

  /* Light theme (default) */
  --bg: oklch(98.5% 0.004 var(--brand-h));
  --surface: oklch(100% 0 0);
  --surface-2: oklch(96.5% 0.006 var(--brand-h));
  --border: oklch(89% 0.01 var(--brand-h));
  --text: oklch(22% 0.02 var(--brand-h));
  --text-muted: oklch(
    46% 0.02 var(--brand-h)
  ); /* >= 4.5:1 on --bg and --surface */
  --primary: var(--brand-navy);
  --primary-hover: color-mix(in srgb, var(--brand-navy) 88%, white);
  --accent: var(--brand-yellow);
  --on-primary: oklch(99% 0 0);
  --danger: oklch(53% 0.2 27);
  --success: oklch(52% 0.14 150);
  --warning: oklch(60% 0.15 75);
  --focus: oklch(62% 0.18 var(--brand-h));
  --shadow-1:
    0 1px 2px oklch(20% 0.02 var(--brand-h) / 0.08),
    0 1px 1px oklch(20% 0.02 var(--brand-h) / 0.05);
  --shadow-2: 0 8px 24px oklch(20% 0.02 var(--brand-h) / 0.14);
  --scrim: oklch(15% 0.02 var(--brand-h) / 0.5);

  /* Type: system stack covers Vietnamese diacritics on every OS and costs zero bytes.
     If you add a webfont, it MUST ship the "vietnamese" subset (see references/design-system.md). */
  --font-sans:
    system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue",
    Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-sm: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-lg: clamp(1.125rem, 1.07rem + 0.3vw, 1.25rem);
  --fs-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --lh-body: 1.6; /* Vietnamese stacked diacritics need >= 1.5 */
  --lh-tight: 1.25;

  /* Space (4px base), radius, motion, layers */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --tap: 2.75rem; /* 44px minimum touch target */
  --button-min-height: 44px;
  --receipt-width: 80mm;
  --keypad-grid: repeat(4, 1fr);
  --content-narrow: 42rem;
  --content-login: 28rem;
  --content-search: 18rem;
  --table-min-width: 48rem;
  --pos-product-min-width: 9rem;
  --dialog-wide: 38rem;
  --pos-card-min-height: 7rem;
  --quantity-width: 5rem;
  --chart-min-height: 16rem;
  --dur-fast: 120ms;
  --dur: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --z-header: 10;
  --z-dialog: 50;
  --z-toast: 60;
  --container: 72rem;
}

/* Dark theme: explicit choice wins; otherwise follow the OS. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: oklch(17% 0.015 var(--brand-h));
  --surface: oklch(21% 0.02 var(--brand-h));
  --surface-2: oklch(25% 0.022 var(--brand-h));
  --border: oklch(33% 0.025 var(--brand-h));
  --text: oklch(95% 0.008 var(--brand-h));
  --text-muted: oklch(74% 0.02 var(--brand-h));
  --primary: var(--brand-yellow);
  --primary-hover: color-mix(in srgb, var(--brand-yellow) 88%, white);
  --on-primary: var(--brand-navy);
  --danger: oklch(70% 0.17 27);
  --success: oklch(74% 0.15 150);
  --warning: oklch(80% 0.14 80);
  --focus: oklch(76% 0.15 var(--brand-h));
  --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.5);
  --shadow-2: 0 8px 24px oklch(0% 0 0 / 0.55);
  --scrim: oklch(5% 0 0 / 0.65);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: oklch(17% 0.015 var(--brand-h));
    --surface: oklch(21% 0.02 var(--brand-h));
    --surface-2: oklch(25% 0.022 var(--brand-h));
    --border: oklch(33% 0.025 var(--brand-h));
    --text: oklch(95% 0.008 var(--brand-h));
    --text-muted: oklch(74% 0.02 var(--brand-h));
    --primary: var(--brand-yellow);
    --primary-hover: color-mix(in srgb, var(--brand-yellow) 88%, white);
    --on-primary: var(--brand-navy);
    --danger: oklch(70% 0.17 27);
    --success: oklch(74% 0.15 150);
    --warning: oklch(80% 0.14 80);
    --focus: oklch(76% 0.15 var(--brand-h));
    --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.5);
    --shadow-2: 0 8px 24px oklch(0% 0 0 / 0.55);
    --scrim: oklch(5% 0 0 / 0.65);
  }
}