/* =====================================================================================================
   Gomok design tokens — ONE theme for every Gomok screen.
   Source: gomok-supermarket app/css/tokens.css. Copies (never edit a copy — run `node tools/sync-tokens.js`):
     sites/common/tokens.css · shop/css/tokens.css · showcase/tokens.css
     gomok-hotel-erp pos/css/tokens.css · gomok-hotel-erp site/tokens.css   (`node tools/sync-tokens.js <hotel repo>`)
   What is here: colour roles, radius / spacing / type scales, one font stack, elevation, motion, light + dark,
   and each company's brand colours (<html data-brand="…">). Every name starts with --ds- so it never clashes with a
   product's own names; each product binds its own names to these (app/css/ds.css, group/css/group.css,
   sites/common/site.css, shop/css/shop.css, hotel pos/css/ds.css). Guide: app/DEVELOPING.md → "Design system".
   ===================================================================================================== */
:root {
  /* ---------- type: one font stack, one scale ---------- */
  --ds-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-font-serif: Georgia, "Times New Roman", serif;
  --ds-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ds-fs-xs: .75rem; --ds-fs-sm: .85rem; --ds-fs-md: 1rem; --ds-fs-lg: 1.15rem; --ds-fs-xl: 1.4rem; --ds-fs-2xl: 1.8rem; --ds-fs-3xl: 2.4rem;
  --ds-lh: 1.45; --ds-lh-tight: 1.15;
  --ds-fw-normal: 400; --ds-fw-medium: 600; --ds-fw-bold: 700; --ds-fw-heavy: 800;
  /* ---------- spacing: a 4 px grid ---------- */
  --ds-s-1: 4px; --ds-s-2: 8px; --ds-s-3: 12px; --ds-s-4: 16px; --ds-s-5: 20px; --ds-s-6: 24px; --ds-s-7: 32px; --ds-s-8: 48px;
  /* ---------- radius ---------- */
  --ds-r-xs: 6px; --ds-r-sm: 10px; --ds-r-md: 14px; --ds-r-lg: 18px; --ds-r-xl: 24px; --ds-r-pill: 999px;
  /* ---------- motion (switched off by prefers-reduced-motion below) ---------- */
  --ds-dur-1: 120ms; --ds-dur-2: 200ms; --ds-dur-3: 320ms;
  --ds-ease: cubic-bezier(.2, .8, .2, 1); --ds-ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ---------- brand: Gomok green + amber unless a company's data-brand says otherwise ---------- */
  --ds-brand: #15803d; --ds-brand-2: #f59e0b; --ds-brand-top: color-mix(in srgb, var(--ds-brand) 70%, #000);

  /* ---------- colour roles (light) ---------- */
  --ds-bg: #f4f6f5; --ds-surface: #ffffff; --ds-surface-2: #eef2f0; --ds-ink: #15201a; --ds-muted: #5d6b63; --ds-line: #dde3df;
  --ds-primary: var(--ds-brand); --ds-primary-ink: #ffffff;
  --ds-accent: var(--ds-brand-2); --ds-accent-ink: #1b1300;
  --ds-top: var(--ds-brand-top); --ds-top-ink: #ffffff;
  --ds-success: #15803d; --ds-warn: #b45309; --ds-danger: #b91c1c; --ds-info: #1d4ed8;
  --ds-success-soft: #dcfce7; --ds-warn-soft: #fef3c7; --ds-danger-soft: #fee2e2; --ds-info-soft: #dbeafe;
  --ds-primary-soft: color-mix(in srgb, var(--ds-primary) 13%, var(--ds-surface));
  --ds-accent-soft: color-mix(in srgb, var(--ds-accent) 18%, var(--ds-surface));
  --ds-scrim: rgb(10 16 13 / .45);
  /* ---------- elevation ---------- */
  --ds-e-1: 0 1px 2px rgb(16 24 20 / .06), 0 2px 8px rgb(16 24 20 / .05);
  --ds-e-2: 0 2px 4px rgb(16 24 20 / .05), 0 10px 28px -6px rgb(16 24 20 / .14);
  --ds-e-3: 0 30px 80px -10px rgb(0 0 0 / .35);
  --ds-hi: rgb(255 255 255 / .55);                      /* the soft light along the top edge of a raised box */
  --ds-focus: 0 0 0 3px color-mix(in srgb, var(--ds-primary) 35%, transparent);
  /* ---------- decoration ---------- */
  --ds-hero: linear-gradient(135deg, var(--ds-top), color-mix(in srgb, var(--ds-top) 55%, var(--ds-primary)));
  --ds-card-grad: linear-gradient(180deg, var(--ds-surface), color-mix(in srgb, var(--ds-surface) 94%, var(--ds-surface-2)));
  color-scheme: light;
}

/* ---------- dark: follows the device, or <html data-theme="dark"> (the hotel POS's "night" too) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="day"]) {
    --ds-bg: #0d1511; --ds-surface: #15201a; --ds-surface-2: #1b2921; --ds-ink: #e7efe9; --ds-muted: #9fb0a6; --ds-line: #26352c;
    --ds-primary: color-mix(in srgb, var(--ds-brand) 70%, #fff); --ds-primary-ink: #06120b;
    --ds-accent: color-mix(in srgb, var(--ds-brand-2) 85%, #fff);
    --ds-top: color-mix(in srgb, var(--ds-brand) 35%, #050807); --ds-top-ink: #f4faf6;
    --ds-success: #22c55e; --ds-warn: #f59e0b; --ds-danger: #f87171; --ds-info: #60a5fa;
    --ds-success-soft: #14361f; --ds-warn-soft: #3a2a0a; --ds-danger-soft: #3b1414; --ds-info-soft: #13233f;
    --ds-scrim: rgb(0 0 0 / .6);
    --ds-e-1: 0 1px 2px rgb(0 0 0 / .4); --ds-e-2: 0 2px 4px rgb(0 0 0 / .35), 0 12px 30px -8px rgb(0 0 0 / .6); --ds-e-3: 0 30px 80px -10px rgb(0 0 0 / .7);
    --ds-hi: rgb(255 255 255 / .06);
    color-scheme: dark;
  }
}
:root[data-theme="dark"], :root[data-theme="night"] {
  --ds-bg: #0d1511; --ds-surface: #15201a; --ds-surface-2: #1b2921; --ds-ink: #e7efe9; --ds-muted: #9fb0a6; --ds-line: #26352c;
  --ds-primary: color-mix(in srgb, var(--ds-brand) 70%, #fff); --ds-primary-ink: #06120b;
  --ds-accent: color-mix(in srgb, var(--ds-brand-2) 85%, #fff);
  --ds-top: color-mix(in srgb, var(--ds-brand) 35%, #050807); --ds-top-ink: #f4faf6;
  --ds-success: #22c55e; --ds-warn: #f59e0b; --ds-danger: #f87171; --ds-info: #60a5fa;
  --ds-success-soft: #14361f; --ds-warn-soft: #3a2a0a; --ds-danger-soft: #3b1414; --ds-info-soft: #13233f;
  --ds-scrim: rgb(0 0 0 / .6);
  --ds-e-1: 0 1px 2px rgb(0 0 0 / .4); --ds-e-2: 0 2px 4px rgb(0 0 0 / .35), 0 12px 30px -8px rgb(0 0 0 / .6); --ds-e-3: 0 30px 80px -10px rgb(0 0 0 / .7);
  --ds-hi: rgb(255 255 255 / .06);
  color-scheme: dark;
}

/* ---------- each company's colours: <html data-brand="…"> (Numero Group) ---------- */
:root[data-brand="group"]       { --ds-brand: #1e3a6e; --ds-brand-2: #d4a72c; --ds-brand-top: #0f1f3d; }   /* Numero Group: navy + gold */
:root[data-brand="dozenprice"]  { --ds-brand: #21409a; --ds-brand-2: #face03; --ds-brand-top: #1b347e; }   /* DozenPrice: blue + yellow */
:root[data-brand="a202"]        { --ds-brand: #7a5a12; --ds-brand-2: #e4c06a; --ds-brand-top: #4a360a; }   /* A202 Beauty Place: gold */
:root[data-brand="numerohomes"] { --ds-brand: #1747a6; --ds-brand-2: #7cc242; --ds-brand-top: #0f3277; }   /* Numero Homes: blue + green */
:root[data-brand="viola"]       { --ds-brand: #6b0f2a; --ds-brand-2: #e9b44c; --ds-brand-top: #4a0a1d; }   /* Viola Kitchen: burgundy + gold */

/* ---------- the same everywhere: calm motion when the device asks for it ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --ds-dur-1: 0ms; --ds-dur-2: 0ms; --ds-dur-3: 0ms; }
}