/* ============================================================
   bento-tokens.css
   ────────────────────────────────────────────────────────────
   Design tokens for the Bento Compartments direction.
   Palette: warm cream paper, cast-iron ink, matcha accent,
   with akami red reserved for spicy badges + critical alerts.

   Naming intent:
     paper / cream  : surface colours (bone-warm)
     ink            : type / borders / on-light text
     matcha         : primary brand accent
     sesame         : warm hover / seed-yellow
     akami / nori   : flavour accents, used sparingly
   ============================================================ */

:root {
  /* ── Paper (surface) ─────────────────────────────────────── */
  --paper-bone:   #F6F0E1;   /* base page background — warm washi */
  --paper-cream:  #EDE5D0;   /* tile background */
  --paper-dim:    #E5DCC3;   /* raised / hover tile */
  --paper-edge:   #D5CBAF;   /* tile border */

  /* ── Ink (foreground) ────────────────────────────────────── */
  --ink-900:      #1A1813;   /* primary text */
  --ink-700:      #3A352A;   /* secondary text */
  --ink-500:      #6B6253;   /* tertiary text */
  --ink-300:      #A89E87;   /* muted / placeholder */
  --ink-100:      #C9C0A9;   /* deep paper rule */

  /* ── Matcha (primary accent) ─────────────────────────────── */
  --matcha-900:   #BF360C;
  --matcha-700:   #E64A19;
  --matcha-500:   #FF5722;
  --matcha-300:   #FF8A65;
  --matcha-100:   #FBE9E7;

  /* ── Flavour accents (use sparingly) ─────────────────────── */
  --akami:        #C8312A;   /* tuna red — spicy badge, alert */
  --akami-deep:   #8E1F1A;
  --sesame:       #E8B73A;   /* warm seed yellow — hover */
  --nori:         #FF5722;   /* nori accent */
  --shoyu:        #2C1A0E;   /* dark soy brown */

  /* ── Compound dark surfaces (used for "filled" hero tiles) */
  --filled-bg:    #1F1C16;
  --filled-fg:    #F6F0E1;

  /* ── Typography ──────────────────────────────────────────── */
  /* Display: Instrument Serif — a modern editorial serif with a
     beautiful italic. Free on Google Fonts. Pairs cleanly with
     anything humanist below.
     Body: Geist — a contemporary UI sans (Vercel's typeface),
     free on Google Fonts. Compact, sharp at small sizes.
     Mono: JetBrains Mono — tabular figures for prices. */
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-ui:      "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid type scale — clamp(min, fluid-vw, max). */
  --t-micro:    clamp(0.70rem, 0.66rem + 0.20vw, 0.78rem);
  --t-eyebrow:  clamp(0.78rem, 0.74rem + 0.22vw, 0.86rem);
  --t-body:     clamp(0.96rem, 0.92rem + 0.22vw, 1.06rem);
  --t-lede:     clamp(1.12rem, 1.00rem + 0.62vw, 1.42rem);
  --t-h3:       clamp(1.30rem, 1.10rem + 1.00vw, 1.95rem);
  --t-h2:       clamp(2.20rem, 1.40rem + 3.80vw, 4.40rem);
  --t-display:  clamp(3.60rem, 2.00rem + 7.20vw, 9.20rem);
  --t-tile-num: clamp(2.80rem, 1.60rem + 5.20vw, 6.80rem);

  --lh-tight:   0.95;
  --lh-snug:    1.10;
  --lh-body:    1.55;

  --ls-display: -0.025em;
  --ls-tight:   -0.015em;
  --ls-body:    -0.005em;
  --ls-caps:    0.16em;

  /* ── Spacing (8pt grid) ──────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Bento gutter — gap between tiles. Tight to keep the mosaic feel. */
  --gap:    14px;
  --gap-lg: 18px;

  --gutter: clamp(1rem, 0.5rem + 2.4vw, 2.5rem);
  --maxw:   1480px;

  /* ── Radii / borders ─────────────────────────────────────── */
  /* Modern bento aesthetic = generous radii. The big tiles use lg;
     small UI elements use md; pills use the full pill. */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  --rule:   1px solid var(--paper-edge);

  /* ── Shadows ────────────────────────────────────────────────
     Soft, paper-on-paper. Almost no shadow at rest; a slight lift on
     hover. We never use harsh black shadows on cream — they read as
     bruises. Brown-tinted shadows preserve the warmth. */
  --shadow-rest:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 1px 2px rgba(80,60,30,0.06);
  --shadow-lift:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 18px 32px -12px rgba(80,60,30,0.18),
    0 4px 8px rgba(80,60,30,0.10);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-1: 160ms;
  --dur-2: 280ms;
  --dur-3: 480ms;
  --dur-4: 720ms;

  /* ── Layout sizes ────────────────────────────────────────── */
  --header-h: 72px;

  /* Bento row height — the visual rhythm of every grid on the site.
     We size tiles in multiples of this so the page feels musical. */
  --bento-row: clamp(120px, 12vw, 200px);
}

/* Reduced motion — collapse durations only. We don't collapse easings;
   reduced-motion users still benefit from the timing curve when a
   hover causes a small property change. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; }
}