/* =============================================================
   NINE JAPAN — Colors & Type tokens
   Renewal direction: Bold / Graphic × Premium Japan
   ============================================================= */

/* ---------- Web fonts (Google Fonts substitutions) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Shippori+Mincho:wght@400;500;600;700;800&family=Noto+Serif+JP:wght@400;500;600;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ===================== COLORS ===================== */

  /* Brand core */
  --nj-ink:        #0A0A0A;   /* Primary dark BG */
  --nj-charcoal:   #1C1C1C;   /* Surface on ink (cards) */
  --nj-graphite:   #2A2A2A;   /* Hover surface on ink */
  --nj-paper:      #FAF8F4;   /* Primary light BG (warm white, washi-ish) */
  --nj-paper-2:    #F2EDE4;   /* Secondary light surface */
  --nj-mist:       #E8E2D6;   /* Borders / dividers on paper */

  --nj-gold:       #C8A664;   /* Primary accent — "9"=lucky, infinity */
  --nj-gold-bright:#E5C078;   /* Hover/active gold */
  --nj-gold-deep:  #8E7340;   /* Pressed / on-white emphasis */

  --nj-crimson:    #C8102E;   /* Energy accent — RIZIN / 日本の赤 */
  --nj-crimson-deep:#8E0A20;  /* Pressed crimson */

  --nj-ash:        #888181;   /* Body secondary on dark */
  --nj-stone:      #5E5E5E;   /* Body secondary on paper */
  --nj-fog:        #B7B0A2;   /* Tertiary on paper */

  /* Foreground / background semantics */
  --fg-1:          #FAF8F4;   /* Primary text on dark */
  --fg-2:          #B7B0A2;   /* Secondary text on dark */
  --fg-3:          #5E5E5E;   /* Tertiary text on dark */
  --fg-invert-1:   #0A0A0A;   /* Primary text on light */
  --fg-invert-2:   #2A2A2A;
  --fg-invert-3:   #5E5E5E;
  --fg-gold:       var(--nj-gold);
  --fg-crimson:    var(--nj-crimson);

  --bg-1:          var(--nj-ink);
  --bg-2:          var(--nj-charcoal);
  --bg-3:          var(--nj-graphite);
  --bg-paper-1:    var(--nj-paper);
  --bg-paper-2:    var(--nj-paper-2);

  --border-1:      rgba(250, 248, 244, .12);
  --border-2:      rgba(250, 248, 244, .24);
  --border-paper:  #DCD4C3;

  /* Semantic */
  --success:       #5BA46E;
  --warning:       #E3A235;
  --error:         var(--nj-crimson);
  --info:          #4A6B8A;

  /* ===================== TYPE ===================== */
  --font-display:  'Cormorant Garamond', 'Shippori Mincho', 'Noto Serif JP', serif;
  --font-sub-en:   'Cormorant Garamond', 'Shippori Mincho', 'Noto Serif JP', serif;
  --font-jp-sans:  'Shippori Mincho', 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --font-body:     'Shippori Mincho', 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --font-mincho:   'Shippori Mincho', 'Noto Serif JP', serif;
  --font-mono:     'JetBrains Mono', monospace;

  --fw-thin:       300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-bold:       700;
  --fw-black:      900;

  /* Size scale (px) */
  --fs-12:  12px;
  --fs-13:  13px;
  --fs-14:  14px;
  --fs-15:  15px;
  --fs-16:  16px;
  --fs-18:  18px;
  --fs-20:  20px;
  --fs-24:  24px;
  --fs-28:  28px;
  --fs-32:  32px;
  --fs-40:  40px;
  --fs-48:  48px;
  --fs-64:  64px;
  --fs-80:  80px;
  --fs-104: 104px;
  --fs-128: 128px;
  --fs-160: 160px;

  /* Line height */
  --lh-tight:    1.04;
  --lh-snug:     1.18;
  --lh-base:     1.6;
  --lh-relaxed:  1.85;
  --lh-display:  0.92;

  /* Letter spacing */
  --ls-display:  0.02em;
  --ls-en-label: 0.16em;   /* Uppercase English labels */
  --ls-en-wide:  0.24em;
  --ls-jp-base:  0.04em;
  --ls-jp-loose: 0.1em;

  /* ===================== SPACING ===================== */
  --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;
  --s-11: 192px;

  /* ===================== RADIUS ===================== */
  --r-0:    0;
  --r-1:    2px;       /* Buttons, inputs */
  --r-2:    4px;
  --r-pill: 999px;     /* Badges only */

  /* ===================== SHADOW (paper BG only) ===================== */
  --shadow-sm: 0 1px 2px rgba(10,10,10,.06);
  --shadow-md: 0 6px 16px rgba(10,10,10,.08);
  --shadow-lg: 0 18px 48px rgba(10,10,10,.12);
  --shadow-xl: 0 32px 80px rgba(10,10,10,.18);

  /* ===================== MOTION ===================== */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast:    160ms;
  --dur-base:    360ms;
  --dur-slow:    560ms;
}

/* =============================================================
   Semantic typographic primitives (use as classes or @extend)
   ============================================================= */
.nj-h-display {
  font-family: var(--font-display);
  font-weight: 400;          /* Bebas Neue ships only 400 */
  font-size: clamp(72px, 12vw, 192px);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}
.nj-h1 {
  font-family: var(--font-jp-sans);
  font-weight: var(--fw-black);
  font-size: clamp(40px, 5vw, 72px);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-jp-base);
}
.nj-h2 {
  font-family: var(--font-jp-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-jp-base);
}
.nj-h3 {
  font-family: var(--font-jp-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(20px, 2vw, 28px);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-jp-base);
}
.nj-eyebrow {
  font-family: var(--font-sub-en);
  font-weight: var(--fw-medium);
  font-size: var(--fs-13);
  letter-spacing: var(--ls-en-wide);
  text-transform: uppercase;
}
.nj-eyebrow-gold { color: var(--nj-gold); }
.nj-eyebrow-crimson { color: var(--nj-crimson); }

.nj-p {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-jp-base);
}
.nj-p-lg {
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-jp-base);
}
.nj-small {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-jp-base);
}

.nj-mincho {
  font-family: var(--font-mincho);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-jp-loose);
}
.nj-mono { font-family: var(--font-mono); letter-spacing: 0; }

/* Number plate — Bebas Neue jumbo (the brand's "9" motif) */
.nj-numeral {
  font-family: var(--font-display);
  font-size: clamp(120px, 22vw, 360px);
  line-height: .8;
  letter-spacing: -0.03em;
}

/* =============================================================
   Element selectors (used in raw HTML mocks)
   ============================================================= */
html, body { background: var(--bg-1); color: var(--fg-1); }
body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-jp-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1 { font: var(--fw-black) var(--fs-64)/var(--lh-snug) var(--font-jp-sans); letter-spacing: var(--ls-jp-base); margin: 0; }
h2 { font: var(--fw-bold)  var(--fs-40)/var(--lh-snug) var(--font-jp-sans); letter-spacing: var(--ls-jp-base); margin: 0; }
h3 { font: var(--fw-bold)  var(--fs-24)/var(--lh-snug) var(--font-jp-sans); letter-spacing: var(--ls-jp-base); margin: 0; }
p  { margin: 0; }

a  { color: inherit; text-decoration: none; }
::selection { background: var(--nj-gold); color: var(--nj-ink); }