/* Khmer Bowl · design system tokens. Locked before composition (design-precision). */

:root {
  /* ---- Color: sampled from their real mark + food, warm neutrals from the brand hue ---- */
  --red:        #bd2027;   /* signature accent · scarce, one action per view */
  --red-deep:   #8f171c;
  --gold:       #b78f52;   /* second note · Khmer temple brass */
  --gold-lit:   #d8b071;

  --ink:        #1a120b;   /* warm near-black, not pure black */
  --night:      #120c07;   /* diner-at-night ground */
  --char:       #241812;   /* raised warm surface */

  --cream:      #f5ecdd;   /* rice / paper */
  --cream-dim:  #d9cbb4;
  --ember:      #ad672c;   /* warm amber from the banner */
  --coal-line:  rgba(245,236,221,0.12);

  /* ---- Heritage jewel tones (the second direction): temple + night market + their own bowls.
         Atmosphere and material only. RED stays the single action accent. ---- */
  --jade:       #34a07d;   /* Khmer emerald / banana leaf / the green cha kreung */
  --jade-deep:  #10493b;
  --indigo:     #4560b8;   /* the blue-and-white prahok bowl */
  --indigo-deep:#1a2450;
  --saffron:    #e0a12f;   /* turmeric / monk's robe */
  --gold-foil:  #f4dca0;   /* the moving highlight in the gold shimmer */

  --surface-0: var(--night);
  --surface-1: var(--char);
  --text:      var(--cream);
  --text-muted: #b6a48a;   /* warm muted, >=4.5:1 on night */

  /* ---- Type: one ratio (1.25), generated. Two families max. ---- */
  --font-display: "Fraunces", Georgia, serif;      /* voice · warm, retro, high-contrast */
  --font-text:    "Archivo", system-ui, sans-serif; /* clarity · modern grotesque */

  --ms-0: 1rem;      --ms-1: 1.25rem;  --ms-2: 1.563rem; --ms-3: 1.953rem;
  --ms-4: 2.441rem;  --ms-5: 3.052rem; --ms-6: 3.815rem; --ms-7: 4.768rem;
  --ms-dn1: 0.8rem;

  /* ---- Spacing: 4-based ramp, 16 heartbeat ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px; --space-11: 160px;

  /* ---- Layout ---- */
  --edge:    clamp(1rem, 0.6rem + 1.1vw, 1.5rem);
  --shell:   min(100% - 2*var(--edge), 75rem);
  --measure: 62ch;
  --section-y: clamp(3.5rem, 2.5rem + 4.5vw, 8rem);

  /* ---- Radius ---- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; --r-full: 50%;

  /* ---- Motion: two eases, four durations, one reveal ---- */
  --ease-standard:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-expressive: cubic-bezier(0.16, 1, 0.30, 1);
  --dur-micro: 120ms; --dur-element: 200ms; --dur-section: 320ms; --dur-cinematic: 600ms;

  font-size: clamp(1rem, 0.93rem + 0.31vw, 1.1875rem);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: var(--font-text);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--red); color: var(--cream); }

.shell { width: var(--shell); margin-inline: auto; padding-inline: var(--edge); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; }