/* =====================================================================
   tokens.css — Hawker Tales design system
   Single source of truth for all colour, type, and layout decisions.
   Extracted verbatim from the V4 prototype's :root block.
   Touch with care. Anything edited here propagates to every page.
   ===================================================================== */

:root {

  /* ─────────────────────────────────────────────────────────────────
     PAPER — the page itself
     The cookbook is a printed-feeling artefact. These are the
     "stock" colours: cream parchment for body, slightly aged paper
     for cards, deeper fold colour for shadows.
     ───────────────────────────────────────────────────────────────── */
  --paper:         #F5EFE3;   /* main background — cream parchment   */
  --paper-deep:    #EDE3D0;   /* card backgrounds — aged page        */
  --paper-shadow:  #E2D5BD;   /* fold / inset shadow                 */

  /* ─────────────────────────────────────────────────────────────────
     INK — the text
     Three weights of brown, never pure black. Pure black would
     fight the warm paper.
     ───────────────────────────────────────────────────────────────── */
  --ink:           #2B1F14;   /* primary body copy                   */
  --ink-soft:      #5A4632;   /* secondary text, captions            */
  --ink-faint:    #8A7458;    /* tertiary, fine print, eyebrows      */

  /* ─────────────────────────────────────────────────────────────────
     ACCENT — the chilli, the seal, the gold leaf, the jade
     Used sparingly. Terracotta is the primary accent (Hock Ko's
     seal, the chilli icon). Gold is for "Shifu's Lift" callouts.
     Jade is the heritage Chinese green used on Han characters and
     selected accents.
     ───────────────────────────────────────────────────────────────── */
  --terracotta:       #A0492D;
  --terracotta-dark:  #7A3520;   /* hover state, deeper accent       */
  --gold:             #C8965A;
  --gold-pale:        #E2C895;   /* tints, watermarks                */
  --jade:             #4F6F4A;

  /* ─────────────────────────────────────────────────────────────────
     RULES — dividing lines and borders
     ───────────────────────────────────────────────────────────────── */
  --rule:       #C9B894;
  --rule-soft:  #D8C9A9;

  /* ─────────────────────────────────────────────────────────────────
     SHADOWS
     RGBA only — the alpha lets shadows tint warm paper warmly.
     ───────────────────────────────────────────────────────────────── */
  --shadow:       rgba(43, 31, 20, 0.12);
  --shadow-deep:  rgba(43, 31, 20, 0.22);

  /* ─────────────────────────────────────────────────────────────────
     TYPOGRAPHY — the three-font system
     Display: Cormorant Garamond — titles, voice lines, italics
     Body:    Crimson Pro       — running text, 17px / 1.7 line
     Han:     Noto Serif SC     — Chinese characters
     Each has a fallback chain ending in Georgia.
     ───────────────────────────────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --font-body:    'Crimson Pro', 'Crimson Text', Georgia, serif;
  --font-han:     'Noto Serif SC', 'Cormorant Garamond', serif;

  /* ─────────────────────────────────────────────────────────────────
     LAYOUT — column widths and the fluid gutter
     66ch is the editorial reading column.
     88ch is for wider blocks (recipe meta strips, tip-card grids).
     1320px is the page max — anything wider gets gutters.
     The gutter scales fluidly between mobile (1.25rem) and desktop
     (3.5rem) based on viewport width.
     ───────────────────────────────────────────────────────────────── */
  --column-width:  66ch;
  --wide-width:    88ch;
  --max-width:     1320px;
  --gutter:        clamp(1.25rem, 4vw, 3.5rem);

  /* ─────────────────────────────────────────────────────────────────
     SPACING — modular scale
     New in the production build. The prototype uses ad-hoc rem
     values inline; consolidating to a scale makes future spacing
     edits one-line changes.
     ───────────────────────────────────────────────────────────────── */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   2rem;
  --space-lg:   3rem;
  --space-xl:   5rem;
  --space-2xl:  8rem;

  /* ─────────────────────────────────────────────────────────────────
     RADII — border radius scale
     ───────────────────────────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;

}