/* Design tokens — the only stylesheet allowed to contain colour literals.
   See engineering/ui-design-system.md.  Components use var(--token) only.

   Palette (Book Popup Store logo pack, option A):
     Deep Mustard  #C89412  canopy and accents. A FILL colour: never text on cream.
     Ink Black     #1D1C18  stall structure, wordmark, all body copy.
     Cream         #F7F1E3  background, and the knocked-out book spines.
     Mustard Deep  #8A6410  text-safe mustard for links and highlighted words.

   Everything else here is a tint, shade or transparency of those four, plus
   the four status hues a shop UI cannot do without (success, warning, danger,
   info) tuned to sit on cream without fighting the mustard.

   Theming: the dark set is defined on :root, so the storefront and the admin
   panel theme together. "system" leaves no data-theme attribute and follows
   prefers-color-scheme; the toggle stamps data-theme="light" or "dark", which
   wins in both directions. */
:root{
  color-scheme:light;
  /* surfaces + ink */
  --paper:#f7f1e3;--surface:#fffcf4;--surface-2:#f1ead8;--surface-3:#e8dfc8;
  --glass:rgba(247,241,227,.86);--overlay:rgba(29,28,24,.66);
  --ink:#1d1c18;--ink-2:#4a473d;--ink-3:#6e6a5c;--ink-inverse:#f7f1e3;
  --line:#e3dbc7;--line-2:#d2c8ae;--line-strong:#b9ad8d;
  /* brand: ink is the primary action, mustard is the accent fill,
     mustard-deep is the only mustard allowed as text on a light surface */
  --brand:#1d1c18;--brand-2:#35332b;--brand-soft:#f0e7d0;--brand-ink:#f7f1e3;--brand-glow:rgba(29,28,24,.3);
  --link:#8a6410;--link-2:#6f5009;
  --accent:#c89412;--accent-2:#ad7f0e;--accent-soft:#f6e9c6;--accent-ink:#1d1c18;
  /* status */
  --ok:#3f6b34;--ok-soft:#e6edd8;--warn:#8a6410;--warn-soft:#f6e9c6;
  --danger:#a8321f;--danger-soft:#f7e3dd;--info:#2f5670;--info-soft:#e2ecf2;
  --focus:#c89412;
  /* charts (single sequential hue: the canopy mustard) */
  --chart-1:#c89412;--chart-1-soft:#ebd9a8;--chart-grid:#e8dfc8;--chart-tip:#1d1c18;--chart-tip-ink:#f7f1e3;
  /* sidebar (admin): the stall structure, ink with a mustard active state */
  --side-bg:#1d1c18;--side-bg-2:#131210;--side-ink:#cfc9b8;--side-ink-2:#938e7e;--side-active:#c89412;--side-active-ink:#1d1c18;--side-hover:rgba(255,255,255,.08);--side-line:rgba(255,255,255,.14);
  /* type — Myanmar faces are named so a device that has one uses it; nothing
     is downloaded, so the strict CSP and font-src 'self' are untouched */
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,"Pyidaungsu","Padauk","Myanmar Text","Noto Sans Myanmar",sans-serif;
  --font-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman","Pyidaungsu","Padauk","Myanmar Text",serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --text-xs:.75rem;--text-sm:.875rem;--text-md:1rem;--text-lg:1.125rem;--text-xl:1.375rem;
  --text-2xl:clamp(1.6rem,2.4vw,2.1rem);--text-3xl:clamp(1.9rem,3.6vw,2.7rem);--text-4xl:clamp(2.2rem,5.2vw,3.9rem);
  --lh-body:1.6;--lh-tight:1.15;
  /* spacing */
  --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;
  --gutter:clamp(16px,4vw,40px);
  /* shape + depth */
  --r-sm:8px;--r-md:12px;--r-lg:18px;--r-xl:24px;--r-pill:999px;
  --shadow-1:0 1px 2px rgba(29,28,24,.05),0 8px 24px -16px rgba(29,28,24,.26);
  --shadow-2:0 2px 6px rgba(29,28,24,.07),0 22px 44px -24px rgba(29,28,24,.38);
  --shadow-3:0 30px 80px -30px rgba(29,28,24,.55);
  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);--dur-1:120ms;--dur-2:220ms;
  /* control sizing */
  --control-h:44px;--control-h-sm:36px;--control-h-lg:52px;
  /* media ratios (PRD-010): one place decides how a cover is framed */
  --ratio-cover:2/3;--ratio-scene:4/3;
  --book-hero-max:min(56vh,420px);
}

/* Dark: the same semantic tokens re-stepped onto an ink ground. Mustard
   lightens to #e0ae33 so it stays legible as text there, which is the one
   place mustard may carry type. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#14130f;--surface:#1d1c18;--surface-2:#26241e;--surface-3:#322f26;
    --glass:rgba(29,28,24,.88);--overlay:rgba(0,0,0,.72);
    --ink:#f2eddf;--ink-2:#c4bca6;--ink-3:#978f7b;--ink-inverse:#1d1c18;
    --line:#332f26;--line-2:#45402f;--line-strong:#5c5540;
    --brand:#e0ae33;--brand-2:#efc254;--brand-soft:#342d15;--brand-ink:#1d1c18;--brand-glow:rgba(224,174,51,.28);
    --link:#e0ae33;--link-2:#efc254;
    --accent:#e0ae33;--accent-2:#efc254;--accent-soft:#3a3117;--accent-ink:#1d1c18;
    --ok:#8fbf6e;--ok-soft:#22301a;--warn:#e0ae33;--warn-soft:#3a3117;
    --danger:#e8897a;--danger-soft:#3b1f1a;--info:#8fb6cf;--info-soft:#1d2a33;
    --focus:#efc254;
    --chart-1:#e0ae33;--chart-1-soft:#4a3c18;--chart-grid:#322f26;--chart-tip:#f2eddf;--chart-tip-ink:#1d1c18;
    --side-bg:#111009;--side-bg-2:#0b0a06;--side-ink:#c9c2af;--side-ink-2:#8a8474;--side-active:#e0ae33;--side-active-ink:#1d1c18;--side-hover:rgba(255,255,255,.06);--side-line:rgba(255,255,255,.1);
    --shadow-1:0 1px 2px rgba(0,0,0,.4),0 8px 24px -16px rgba(0,0,0,.8);
    --shadow-2:0 2px 6px rgba(0,0,0,.5),0 22px 44px -24px rgba(0,0,0,.9);
    --shadow-3:0 30px 80px -30px rgba(0,0,0,.95);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#14130f;--surface:#1d1c18;--surface-2:#26241e;--surface-3:#322f26;
  --glass:rgba(29,28,24,.88);--overlay:rgba(0,0,0,.72);
  --ink:#f2eddf;--ink-2:#c4bca6;--ink-3:#978f7b;--ink-inverse:#1d1c18;
  --line:#332f26;--line-2:#45402f;--line-strong:#5c5540;
  --brand:#e0ae33;--brand-2:#efc254;--brand-soft:#342d15;--brand-ink:#1d1c18;--brand-glow:rgba(224,174,51,.28);
  --link:#e0ae33;--link-2:#efc254;
  --accent:#e0ae33;--accent-2:#efc254;--accent-soft:#3a3117;--accent-ink:#1d1c18;
  --ok:#8fbf6e;--ok-soft:#22301a;--warn:#e0ae33;--warn-soft:#3a3117;
  --danger:#e8897a;--danger-soft:#3b1f1a;--info:#8fb6cf;--info-soft:#1d2a33;
  --focus:#efc254;
  --chart-1:#e0ae33;--chart-1-soft:#4a3c18;--chart-grid:#322f26;--chart-tip:#f2eddf;--chart-tip-ink:#1d1c18;
  --side-bg:#111009;--side-bg-2:#0b0a06;--side-ink:#c9c2af;--side-ink-2:#8a8474;--side-active:#e0ae33;--side-active-ink:#1d1c18;--side-hover:rgba(255,255,255,.06);--side-line:rgba(255,255,255,.1);
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 8px 24px -16px rgba(0,0,0,.8);
  --shadow-2:0 2px 6px rgba(0,0,0,.5),0 22px 44px -24px rgba(0,0,0,.9);
  --shadow-3:0 30px 80px -30px rgba(0,0,0,.95);
}