/* ============================================================
   Wokaway — design tokens.

   Every colour here was sampled from a photograph of the restaurant itself:
   the terracotta of the round tables and the serving hatch, the lime-washed
   walls, the forest green of the sign and the surfboard menu board, the
   rattan of the chairs and the napkin holders, and the yellow rim of the
   Hong Kong noodle bowl the wonton soup arrives in.

   ⛔ Do not introduce a colour that is not in this file. The palette is the
      room, and the room is the brand.
   ============================================================ */

/* The headings. Young Serif is warm and sturdy, closest of anything on offer
   to lettering painted on a wall or cut into a surfboard — which is what this
   restaurant actually has. It replaced Fraunces on 2026-09-15: Fraunces with
   its WONK axis turned up has become the house style of AI-generated design,
   and it was reading as exactly that.
   ⛔ ONE WEIGHT ONLY (400). Asking for 600 or 700 gets a synthetic bold, which
   on a face this sturdy looks smeared. Every display rule sets 400. */
@font-face {
  font-family: 'Young Serif';
  src: url('/assets/fonts/young-serif.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Fraunces survives in ITALIC ONLY, for the two places the site quotes
   something painted on the wall by hand. Its upright cut is gone, so the
   family now does one job instead of being the whole voice. */
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-italic-var.woff2') format('woff2-variations');
  font-weight: 300 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('/assets/fonts/karla-var.woff2') format('woff2-variations');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('/assets/fonts/karla-italic-var.woff2') format('woff2-variations');
  font-weight: 300 600; font-style: italic; font-display: swap;
}
/* Two glyphs only — 養心, the mark painted on their wall. 1.3KB. */
@font-face {
  font-family: 'Yeungsum';
  src: url('/assets/fonts/yeungsum-subset.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* ── the room ─────────────────────────────────────────── */
  --terracotta:      #B24A32;   /* the tables, the bench, the hatch frame */
  --terracotta-deep: #8E3722;
  --terracotta-soft: #D9836C;
  --limewash:        #F4F0E7;   /* the walls */
  --limewash-warm:   #EDE6D8;
  --forest:          #1E4739;   /* the sign, the logo, the surfboard menu */
  --forest-deep:     #133026;
  --rattan:          #C9A063;   /* the chairs, the lampshades, the napkin holders */
  --rattan-pale:     #E3CFAA;
  --bowl-yellow:     #F2C230;   /* the rim of the Hong Kong noodle bowl */
  --amber:           #E8A33D;   /* the lamplight at night */
  --timber:          #3A2A20;   /* thatch and dark wood */
  --ink:             #241C16;
  --ink-soft:        #5C4E44;

  /* ── roles ────────────────────────────────────────────── */
  --bg:            var(--limewash);
  --bg-alt:        var(--limewash-warm);
  --bg-dark:       var(--forest-deep);
  --text:          var(--ink);
  --text-muted:    var(--ink-soft);
  --text-invert:   #F7F4EC;
  --accent:        var(--terracotta);
  --accent-ink:    var(--terracotta-deep);
  --rule:          rgba(36, 28, 22, .14);
  --rule-strong:   rgba(36, 28, 22, .28);

  /* ── type ─────────────────────────────────────────────── */
  --font-display: 'Young Serif', Georgia, 'Times New Roman', serif;
  --font-body:    'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mark:    'Yeungsum', var(--font-display);
  /* The hand-painted lines only: the wall quote and the pull quote. */
  --font-script:  'Fraunces', Georgia, 'Times New Roman', serif;

  --step--1: clamp(.83rem, .80rem + .12vw, .90rem);
  --step-0:  clamp(1rem, .96rem + .18vw, 1.09rem);
  --step-1:  clamp(1.20rem, 1.12rem + .38vw, 1.44rem);
  --step-2:  clamp(1.45rem, 1.30rem + .74vw, 1.94rem);
  --step-3:  clamp(1.75rem, 1.48rem + 1.32vw, 2.61rem);
  --step-4:  clamp(2.10rem, 1.65rem + 2.22vw, 3.52rem);
  --step-5:  clamp(2.50rem, 1.76rem + 3.66vw, 4.74rem);

  /* ── space ────────────────────────────────────────────── */
  --sp-1: .375rem;
  --sp-2: .75rem;
  --sp-3: 1.125rem;
  --sp-4: 1.75rem;
  --sp-5: 2.75rem;
  --sp-6: 4rem;
  --sp-7: 6rem;

  --wrap: 72rem;
  --wrap-narrow: 42rem;
  --radius: 2px;          /* printed matter has corners, not pills */
  --radius-round: 999px;

  --shadow-lift: 0 1px 0 rgba(36,28,22,.06), 0 10px 24px -14px rgba(36,28,22,.34);

  --ease: cubic-bezier(.22,.61,.36,1);
}