/* =============================================================
   Tokyo Chef — Colors & Type tokens
   Premium UK gyoza brand. Clean, minimal, Japanese precision.
   ============================================================= */

/* Brand-supplied Inter variable fonts (local) */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Noto Serif JP — used only for the 味 mark */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;700;900&display=swap");

:root {
  /* ---------- Brand colors ---------- */
  --tc-red:            #D32F2F;
  --tc-red-deep:       #B71C1C;
  --tc-red-soft:       #F9E4E4;

  /* ---------- Neutrals ---------- */
  --tc-ink:            #111111;
  --tc-ink-2:          #2B2B2D;
  --tc-graphite:       #6E6E73;
  --tc-slate:          #86868B;
  --tc-hairline:       #D2D2D7;
  --tc-mist:           #E8E8ED;
  --tc-grey-bg:        #F5F5F7;
  --tc-paper:          #FAFAFA;
  --tc-white:          #FFFFFF;

  /* ---------- Semantic foreground / surface ---------- */
  --fg-1:              var(--tc-ink);
  --fg-2:              var(--tc-graphite);
  --fg-3:              var(--tc-slate);
  --fg-on-red:         var(--tc-white);
  --fg-on-dark:        var(--tc-white);

  --bg-1:              var(--tc-white);
  --bg-2:              var(--tc-grey-bg);
  --bg-3:              var(--tc-paper);
  --bg-inverse:        var(--tc-ink);

  --border-1:          var(--tc-hairline);
  --border-2:          var(--tc-mist);

  /* ---------- Status ---------- */
  --status-success:    #1B7F3A;
  --status-warning:    #B8860B;
  --status-error:      var(--tc-red);
  --status-info:       #0B6BCB;

  /* ---------- Product accent dots ---------- */
  --p-pork:            #E8A0A0;
  --p-beef:            #8B3A3A;
  --p-prawn:           #F2B5A7;
  --p-vegan:           #5B7A4E;

  /* ---------- Type ---------- */
  --font-sans:         "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
                        "Helvetica Neue", Arial, sans-serif;
  --font-jp:           "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-mono:         "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;

  --fs-hero:        clamp(48px, 7.2vw, 96px);
  --fs-display:     clamp(40px, 5.4vw, 72px);
  --fs-h1:          clamp(32px, 3.6vw, 48px);
  --fs-h2:          clamp(24px, 2.4vw, 32px);
  --fs-h3:          20px;
  --fs-eyebrow:     12px;
  --fs-body-lg:     19px;
  --fs-body:        17px;
  --fs-body-sm:     15px;
  --fs-caption:     13px;
  --fs-micro:       11px;

  --lh-tight:       1.05;
  --lh-snug:        1.2;
  --lh-normal:      1.47;
  --lh-loose:       1.65;

  --tracking-tight:  -0.025em;
  --tracking-snug:   -0.015em;
  --tracking-normal: -0.005em;
  --tracking-wide:   0.08em;
  --tracking-eyebrow: 0.18em;

  /* ---------- Spacing — 4px base ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ---------- Radius ---------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ---------- Shadow ---------- */
  --shadow-1: 0 1px 2px rgba(17, 17, 17, 0.04), 0 1px 1px rgba(17, 17, 17, 0.03);
  --shadow-2: 0 4px 12px rgba(17, 17, 17, 0.06), 0 1px 2px rgba(17, 17, 17, 0.04);
  --shadow-3: 0 12px 32px rgba(17, 17, 17, 0.08), 0 2px 6px rgba(17, 17, 17, 0.04);
  --shadow-pop: 0 24px 60px rgba(17, 17, 17, 0.14), 0 4px 10px rgba(17, 17, 17, 0.06);
  --ring-focus: 0 0 0 3px rgba(211, 47, 47, 0.28);

  /* ---------- Motion ---------- */
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 480ms;

  /* ---------- Layout ---------- */
  --max-w-prose: 64ch;
  --max-w-narrow: 720px;
  --max-w-content: 1080px;
  --max-w-wide: 1280px;
}

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}