/* ============================================================
   tokens.css
   ────────────────────────────────────────────────────────────
   The whole design system on one page. Anything color- or
   type- or rhythm-related comes from a custom property here;
   downstream stylesheets should never hard-code a value.

   Palette name notes (the *why* behind each token):
     --sumi   : ink-black; the colour of cast iron / soy lacquer
     --washi  : warm off-white; recycled paper, the menu card
     --akami  : the deep red of lean tuna (akami) and a torii gate
     --yuzu   : amber-yellow, used for hover underlines & accents
     --wasabi : muted matcha green, reserved for (V) badges
   ============================================================ */

:root {
  /* ── Surface / ink ───────────────────────────────────────── */
  --sumi-900:        #08070A;   /* deepest ground (footer) */
  --sumi-800:        #0B0A08;   /* primary background */
  --sumi-700:        #14120F;   /* raised surface (cards) */
  --sumi-600:        #1E1B17;   /* hovered surface */
  --sumi-500:        #2A2620;   /* divider rule */

  --washi-50:        #F4EFE3;   /* primary on dark */
  --washi-100:       #ECE4D2;   /* primary lede */
  --washi-300:       #B9AE96;   /* muted ink on dark */
  --washi-500:       #7A715E;   /* deep muted */

  --akami:           #C8312A;   /* tuna red — primary accent */
  --akami-bright:    #E94840;   /* hover glow */
  --akami-deep:      #8E1F1A;   /* shadow companion */
  --yuzu:            #E8B73A;   /* amber highlight */
  --yuzu-soft:       #D9A025;   /* darker amber */
  --wasabi:          #FF5722;   /* (V) badge */

  /* ── Compound surface colours ────────────────────────────── */
  --plate:           #F4EFE3;   /* sushi-plate cream */
  --plate-rim:       #1A1813;   /* plate rim shadow */
  --rice:            #F8F5EB;   /* nigiri rice */
  --nori:            #FF5722;   /* nori accent */

  /* ── Typography ──────────────────────────────────────────── */
  --font-display: "Shippori Mincho", "Times New Roman", serif;
  --font-ui:      "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Modular fluid type scale — clamps so we don't have to media-query.
     Math: clamp(min, fluid-vw-based-mid, max). Roughly perfect-fourth. */
  --t-eyebrow:   clamp(0.72rem, 0.66rem + 0.32vw, 0.86rem);
  --t-body:      clamp(0.98rem, 0.92rem + 0.32vw, 1.12rem);
  --t-lede:      clamp(1.12rem, 1.00rem + 0.62vw, 1.42rem);
  --t-h3:        clamp(1.40rem, 1.10rem + 1.40vw, 2.10rem);
  --t-h2:        clamp(2.60rem, 1.40rem + 5.20vw, 6.20rem);
  --t-display:   clamp(4.40rem, 2.20rem + 9.60vw, 12.50rem);

  /* Line heights, letter-spacing, weights */
  --lh-tight:    0.95;
  --lh-snug:     1.10;
  --lh-body:     1.55;
  --lh-loose:    1.75;

  --ls-display: -0.03em;
  --ls-tight:   -0.015em;
  --ls-body:    -0.005em;
  --ls-caps:    0.18em;

  /* ── Rhythm / spacing ────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;
  --space-10: 10rem;

  --gutter:  clamp(1.25rem, 0.5rem + 3vw, 3.5rem);  /* page side padding */
  --maxw:    1480px;                                /* main column cap */

  /* ── Radii / borders / shadows ───────────────────────────── */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Long, soft, low-luminance shadows for dark surfaces */
  --shadow-1: 0 4px 18px rgba(0,0,0,0.35);
  --shadow-2: 0 20px 60px rgba(0,0,0,0.55);
  --shadow-plate:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 18px 40px -8px rgba(0,0,0,0.6),
    0 2px 4px rgba(0,0,0,0.45);

  /* ── Motion ──────────────────────────────────────────────── */
  /* Custom cubic-béziers. Used everywhere — never write a raw curve inline. */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);   /* reveal default */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* swap / morph */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);/* small playful pop */

  --dur-1: 180ms;
  --dur-2: 320ms;
  --dur-3: 520ms;
  --dur-4: 820ms;
  --dur-5: 1200ms;

  /* ── Layout helpers ──────────────────────────────────────── */
  --hero-aspect: 16 / 9;        /* brief requirement */
  --header-h:    72px;
}

/* ============================================================
   Reduced-motion: turn off any decorative motion. Anything that
   *must* still play (e.g. progress bars) should opt back in
   with `@media (prefers-reduced-motion: no-preference)` locally.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
    --dur-4: 0ms;
    --dur-5: 0ms;
  }
}