/* You Heng design tokens: the ONE place colours, type, spacing, radius, shadow and motion live.
   Every page links this file first and uses var(--…) only. No raw hex in components.
   Light is the default; dark follows the phone (System) unless <html data-theme="light|dark"> says otherwise.
   Spec and rules: DESIGN.md. */

:root{
  color-scheme:light;

  /* ---- colour: 60 / 30 / 10 ---- */
  --paper:#FAF6EE;        /* 60%: page background */
  --paper-2:#F1EAD9;      /* quiet second surface: pressed, skeletons, category rail */
  --surface:#FFFFFF;      /* cards and tiles on paper */
  --ink:#1F2A24;          /* all body text + icons */
  --muted:#6B7570;        /* metadata, modifiers. 4.8:1 on surface; on paper only ≥14px (4.4:1) → prefer --muted-strong there */
  --muted-strong:#646E69; /* muted text sitting directly on paper (4.9:1) */
  --green:#0F4A30;        /* header, hero, primary buttons, centre tab. Nothing else */
  --green-press:#0B3A25;  /* pressed state of green things */
  --on-green:#FAF6EE;     /* text on green (9.5:1) */
  --on-green-muted:#C9D6CD;
  --gold:#C9A24A;         /* hairlines, dividers, selected states, fills. NOT text on light */
  --gold-light:#E7CB7E;   /* gold on dark backgrounds (6.5:1 on green) */
  --gold-text:#8A6A1F;    /* gold-family TEXT on light surfaces (prices): 5.0:1 on white, 4.7:1 on paper */
  --chili:#B23A2E;        /* tiny tags only: Spicy, Sold out */
  --ink-fixed:#1F2A24;    /* never flips: text on gold-light / paper plates in both themes */
  --on-chili:#FFFFFF;

  --price:var(--green);   /* prices: deep green, 10.3:1 on white, 9.5:1 on paper (7:1 rule). Was --gold-text (5.0:1) */
  /* derived tints (mixes of brand tokens, no new hues; measured in docs/PALETTE_FOUND.md) */
  --green-tint:#E2E9E6;   /* green 12% on white: done states, focus halo. Green text on it 8.3:1 */
  --gold-tint:#F4ECDB;    /* gold 20% on white: selected chips, preparing. Ink 12.6:1 */
  --chili-tint:#F7EBEA;   /* chili 10% on white: error fields, sold-out tag ground */
  --chili-deep:#8E2E25;   /* error / cancelled TEXT: 7.0:1 on chili-tint, 7.6:1 on paper */
  --leader:rgba(31,42,36,.28); /* dotted leader between dish name and price */
  --accent-ink:var(--green); /* icons, selected frames, text links: green on light, light gold on dark (green on dark ground is only 1.5:1) */
  --hairline:rgba(201,162,74,.38);        /* gold hairline on light */
  --hairline-strong:rgba(201,162,74,.7);
  --selected:var(--gold);                 /* rail bar, radio checks, active tab */
  --scrim:rgba(15,24,19,.42);
  --focus:var(--green);

  /* ---- type ---- */
  --f-km-title:"Moul",serif;                                     /* Khmer section titles only */
  --f-ui:"Kantumruy Pro","Noto Sans Khmer",system-ui,sans-serif; /* everything else */
  --f-num:"DM Serif Display",Georgia,serif;                      /* prices + big numbers only */
  --f-zh:"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;

  --t-12:12px; --t-13:13px; --t-14:14px; --t-16:16px; --t-18:18px;
  --t-20:20px; --t-24:24px; --t-32:32px; --t-40:40px; --t-56:56px;
  --lh-tight:1.15;  /* big Latin numbers / display */
  --lh-latin:1.45;
  --lh-km:1.7;      /* Khmer stacks need room: never below 1.6 */
  --track-label:.08em; /* small uppercase section labels */

  /* ---- spacing: 8pt grid (4 for hairline nudges) ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --gutter:16px;
  --maxw:1120px;
  --tap:44px;        /* minimum touch target */
  --tabbar-h:64px;   /* mobile bottom bar (plus safe-area) */
  --topnav-h:72px;   /* desktop top nav */

  /* ---- radius ---- */
  --r-sm:12px;  /* chips, small tiles, thumbs */
  --r-md:16px;  /* cards, tiles */
  --r-lg:24px;  /* hero, banners, sheets */
  --r-pill:999px;

  /* ---- elevation: one soft layer at most ---- */
  --shadow-1:0 6px 18px rgba(31,42,36,.07);
  --shadow-2:0 10px 28px rgba(31,42,36,.12);  /* floating: tab bar, raised centre tab */
  --shadow-green:0 8px 18px rgba(15,74,48,.28);

  /* ---- motion ---- */
  --dur-fast:150ms; --dur-base:220ms; --dur-slow:400ms;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in:cubic-bezier(.7,0,.84,0);
  --ease-move:cubic-bezier(.77,0,.175,1);
  --spring:cubic-bezier(.3,1.12,.5,1);
}

/* ---- dark: designed, not inverted. Ink ground, green-black surfaces, light-gold accents ---- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#1F2A24; --paper-2:#2C3A32; --surface:#26332C;
    --ink:#FAF6EE; --muted:#A9B1AB; --muted-strong:#A9B1AB;
    --green:#0F4A30; --green-press:#0B3A25;
    --gold:#E7CB7E; --gold-text:#E7CB7E; --price:#E7CB7E;
    --hairline:rgba(231,203,126,.22); --hairline-strong:rgba(231,203,126,.5);
    --selected:#E7CB7E; --scrim:rgba(0,0,0,.5); --focus:#E7CB7E;
    --green-tint:#22392E; --gold-tint:#3A3727; --chili-tint:#3B2724; --chili-deep:#F0B3AA; --leader:rgba(250,246,238,.3); --accent-ink:#E7CB7E;
    --shadow-1:0 0 0 1px rgba(231,203,126,.08);
    --shadow-2:0 10px 28px rgba(0,0,0,.35);
    --shadow-green:0 8px 18px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"],.theme-dark{
  color-scheme:dark;
  --paper:#1F2A24; --paper-2:#2C3A32; --surface:#26332C;
  --ink:#FAF6EE; --muted:#A9B1AB; --muted-strong:#A9B1AB;
  --green:#0F4A30; --green-press:#0B3A25;
  --gold:#E7CB7E; --gold-text:#E7CB7E; --price:#E7CB7E;
  --hairline:rgba(231,203,126,.22); --hairline-strong:rgba(231,203,126,.5);
  --selected:#E7CB7E; --scrim:rgba(0,0,0,.5); --focus:#E7CB7E;
  --green-tint:#22392E; --gold-tint:#3A3727; --chili-tint:#3B2724; --chili-deep:#F0B3AA; --leader:rgba(250,246,238,.3); --accent-ink:#E7CB7E;
  --shadow-1:0 0 0 1px rgba(231,203,126,.08);
  --shadow-2:0 10px 28px rgba(0,0,0,.35);
  --shadow-green:0 8px 18px rgba(0,0,0,.4);
}

/* scoped previews (Appearance screen draws both themes side by side) */
.theme-light{
  --paper:#FAF6EE; --paper-2:#F1EAD9; --surface:#FFFFFF; --ink:#1F2A24; --muted:#6B7570; --muted-strong:#646E69;
  --gold:#C9A24A; --gold-text:#8A6A1F; --price:#0F4A30; --green-tint:#E2E9E6; --gold-tint:#F4ECDB; --leader:rgba(31,42,36,.28); --accent-ink:#0F4A30; --hairline:rgba(201,162,74,.38); --hairline-strong:rgba(201,162,74,.7); --selected:#C9A24A;
}
.theme-dark,.theme-light{background:var(--paper);color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  :root{ --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms; }
}