/* ============================================================
   EN IZAKAYA — Colors & Type Foundations
   縁 — connection, fate, the invisible thread between people
   A monochromatic-warm system: candlelight and ink.
   No cool tones anywhere. No blues, greens, or true greys.
   ============================================================ */

/* ---------- FONTS ---------- */
@font-face {
  font-family: "Avenir";
  src: url("fonts/Avenir-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url("fonts/Avenir-Book.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url("fonts/Avenir-Regular.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url("fonts/Avenir-Heavy.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url("fonts/Avenir-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* ====================================================
     COLOR — the dominant tone carries almost everything
     ==================================================== */

  /* Oxblood / terracotta — THE brand colour. Cured wood, dried
     clay, old lacquer. Grounded, smoky, intimate, atmospheric. */
  --en-oxblood:        #6B2A20;   /* primary — the brush, the field */
  --en-oxblood-deep:   #4A1A14;   /* dim, smoky depth — dark grounds */
  --en-oxblood-black:  #2E120D;   /* almost-black oxblood — deepest ground */
  --en-oxblood-tint:   #8A4334;   /* raised / hover on dark */
  --en-rust:           #A8452F;   /* the wax-pencil line — lighter family */
  --en-rust-soft:      #BE6A52;   /* faded hand-drawn mark on cream */

  /* Cream / natural paper — uncoated, fibrous, slightly warm.
     Washi, recycled cardstock. Menus, stickers, packaging. */
  --en-paper:          #F4E8D2;   /* primary surface — warm paper */
  --en-paper-light:    #FBF5E8;   /* lifted paper / page */
  --en-paper-deep:     #E9D8BB;   /* recessed paper / inset */

  /* Kraft — takeaway packaging, twine, raw paper. Tactile, casual. */
  --en-kraft:          #A87C4F;
  --en-kraft-deep:     #8A6238;

  /* Sumi black — ONLY as ink. Never a flat field. Brushstroke,
     dry-brush, bleed. Warm, never neutral grey. */
  --en-sumi:           #241813;   /* ink */
  --en-sumi-soft:      #4A372D;   /* secondary ink on paper */

  /* Amber / sodium-orange — MOOD, not brand. Lives in photography:
     Tokyo neon, lantern glow, light trails, the red-lit chef. */
  --en-amber:          #DB8A3A;
  --en-glow:           #F0A94A;   /* neon / lantern highlight */

  /* ---------- SEMANTIC: ON PAPER (default, light) ---------- */
  --bg:                var(--en-paper);
  --bg-raised:         var(--en-paper-light);
  --bg-inset:          var(--en-paper-deep);
  --fg1:               var(--en-sumi);       /* primary text/ink */
  --fg2:               var(--en-sumi-soft);  /* secondary text */
  --fg3:               #7C6650;               /* muted / captions — warm */
  --accent:            var(--en-oxblood);     /* primary actions */
  --accent-strong:     var(--en-oxblood-deep);
  --line:              var(--en-rust);        /* hand-drawn rule */
  --hairline:          rgba(36,24,19,0.14);   /* faint paper division */
  --hairline-strong:   rgba(36,24,19,0.28);

  /* ---------- SEMANTIC: ON OXBLOOD (dark, dim, atmospheric) ---------- */
  --d-bg:              var(--en-oxblood);
  --d-bg-deep:         var(--en-oxblood-black);
  --d-fg1:             var(--en-paper-light);
  --d-fg2:             rgba(244,232,210,0.74);
  --d-fg3:             rgba(244,232,210,0.50);
  --d-accent:          var(--en-glow);        /* amber glow on dark */
  --d-line:            var(--en-rust-soft);
  --d-hairline:        rgba(244,232,210,0.16);

  /* ====================================================
     TYPE — Avenir carries everything. Geometric, clean,
     confident. The brushed EN mark is the only "display
     face"; type stays quiet so the gesture can speak.
     ==================================================== */
  --font-sans: "Avenir", "Avenir Next", "Nunito Sans", system-ui, sans-serif;
  --font-mark: "Avenir", sans-serif; /* logo lockups pair brush + Avenir */

  /* Weights */
  --w-light: 300;
  --w-book:  400;
  --w-reg:   500;
  --w-heavy: 700;
  --w-black: 900;

  /* Type scale — generous, editorial. Tracking tightens as size grows. */
  --t-display:  clamp(48px, 7vw, 96px);
  --t-h1:       clamp(36px, 5vw, 60px);
  --t-h2:       clamp(28px, 3.4vw, 40px);
  --t-h3:       24px;
  --t-body-lg:  19px;
  --t-body:     16px;
  --t-small:    14px;
  --t-caption:  12px;
  --t-micro:    11px;

  /* ====================================================
     SPACING — 4px base, calm rhythm
     ==================================================== */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---------- RADII — sharp & flat by default. EN reads as stamped
     ink, kraft packaging, menu cards — square edges, not soft UI.
     Radius is used sparingly; 4px is the practical ceiling. ---------- */
  --r-none: 0; --r-xs: 2px; --r-sm: 3px; --r-md: 4px; --r-lg: 4px; --r-pill: 999px;

  /* ---------- ELEVATION — warm, low, candlelit. Shadows are
     brown-tinted, never neutral-black. Two restrained steps —
     no high "floating" tier; EN stays grounded. ---------- */
  --sh-1: 0 1px 2px rgba(46,18,13,0.10);
  --sh-2: 0 4px 14px rgba(46,18,13,0.14);
  --sh-glow: 0 0 32px rgba(240,169,74,0.30); /* lantern bloom (dark only) */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES (opt-in via .en-type scope)
   ============================================================ */
.en-type { font-family: var(--font-sans); color: var(--fg1);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

.en-display {
  font-family: var(--font-sans); font-weight: var(--w-black);
  font-size: var(--t-display); line-height: 0.96;
  letter-spacing: -0.02em; color: var(--fg1);
}
.en-h1 { font-weight: var(--w-heavy); font-size: var(--t-h1);
  line-height: 1.04; letter-spacing: -0.015em; }
.en-h2 { font-weight: var(--w-heavy); font-size: var(--t-h2);
  line-height: 1.1; letter-spacing: -0.01em; }
.en-h3 { font-weight: var(--w-reg); font-size: var(--t-h3);
  line-height: 1.2; letter-spacing: 0; }
.en-body-lg { font-weight: var(--w-book); font-size: var(--t-body-lg);
  line-height: 1.55; }
.en-body { font-weight: var(--w-book); font-size: var(--t-body);
  line-height: 1.6; }
.en-small { font-weight: var(--w-reg); font-size: var(--t-small);
  line-height: 1.45; }
/* The signature: spaced caps, used sparingly for labels & nav */
.en-eyebrow {
  font-weight: var(--w-heavy); font-size: var(--t-caption);
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent);
}
.en-caption { font-weight: var(--w-reg); font-size: var(--t-caption);
  letter-spacing: 0.04em; color: var(--fg3); }