/* ─────────────────────────────────────────────────────────────
   seh STUDIO — Colors & Type Tokens
   Source of truth: codebase/app/(frontend)/globals.css
   Brand: 憲動工作室 · seh STUDIO
   ───────────────────────────────────────────────────────────── */

/* Brand fonts (Noto Sans TC / Noto Serif TC) loaded via Google Fonts in index.html */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Base palette ──────────────────────────────────────────
     A warm, archival palette — paper + ink + a single competitive red.
     High contrast, calm neutrals; red is earned, never decorative. */
  --paper:    #F2EDE3;  /* primary surface — warm off-white */
  --ink:      #16120E;  /* primary fg — near-black with warm undertone */
  --red:      #C83C2A;  /* action / competitive accent */
  --sand:     #D4C5A9;  /* tertiary fg, placeholders */
  --smoke:    #8A8078;  /* secondary fg, meta */
  --border:   #DDD5C4;  /* hairlines, dividers */

  /* Alphas */
  --ink-50:   rgba(22, 18, 14, 0.05);
  --ink-10:   rgba(22, 18, 14, 0.10);
  --ink-20:   rgba(22, 18, 14, 0.20);
  --paper-60: rgba(242, 237, 227, 0.60);
  --paper-10: rgba(242, 237, 227, 0.10);
  --red-10:   rgba(200, 60, 42, 0.10);
  --red-30:   rgba(200, 60, 42, 0.30);

  /* ── Semantic surface/text ─────────────────────────────── */
  --bg:          var(--paper);
  --bg-inverse:  var(--ink);
  --fg1:         var(--ink);     /* primary text */
  --fg2:         var(--smoke);   /* secondary text, meta, labels */
  --fg3:         var(--sand);    /* tertiary/placeholder */
  --fg-on-ink:   var(--paper);
  --accent:      var(--red);
  --line:        var(--border);

  /* ── Event / portfolio accent colors ─────────────────────
     Drawn from historical TCU editions — each race gets a hue. */
  --evt-spring-23: #C94B0A;
  --evt-winter-23: #0A3C6E;
  --evt-summer-24: #1A6B3C;
  --evt-winter-24: #1E1E3C;
  --evt-spring-25: #8B1A1A;
  --evt-autumn-25: #5C3A00;
  --evt-miaoli-26: #2A4A2A;

  /* ── Type families ─────────────────────────────────────── */
  --font-serif:   'Noto Serif TC', 'Source Han Serif TC', 'Songti TC', serif;
  --font-sans:    'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --font-display: 'Cormorant Garamond', 'Noto Serif TC', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Type scale (desktop) ──────────────────────────────── */
  --fs-mega:    clamp(7rem, 20vw, 18rem);   /* hero wordmark "seh" */
  --fs-hero:    clamp(3rem, 7vw, 6rem);     /* page H1 */
  --fs-display: clamp(2.5rem, 6vw, 5rem);   /* section headline */
  --fs-h1:      3rem;     /* 48px */
  --fs-h2:      2.5rem;   /* 40px */
  --fs-h3:      1.875rem; /* 30px */
  --fs-h4:      1.5rem;   /* 24px */
  --fs-body-lg: 1.125rem; /* 18px */
  --fs-body:    1rem;     /* 16px */
  --fs-body-sm: 0.875rem; /* 14px */
  --fs-caption: 0.75rem;  /* 12px · eyebrow / label */
  --fs-micro:   0.625rem; /* 10px · tagged uppercase eyebrow */

  /* ── Tracking (letter-spacing) ─────────────────────────── */
  --tr-display:   -0.04em; /* mega wordmark */
  --tr-heading:   -0.02em; /* h1-h4 */
  --tr-body:       0;
  --tr-wide:       0.2em;
  --tr-wider:      0.25em;
  --tr-widest:     0.3em;
  --tr-ultra:      0.4em;  /* Section eyebrows · 10-12px caps */
  --tr-extreme:    0.5em;  /* scroll indicators */

  /* ── Weights ──────────────────────────────────────────── */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;       /* serif headlines — always 900 */

  /* ── Line heights ─────────────────────────────────────── */
  --lh-tight:   0.9;       /* display wordmark */
  --lh-snug:    1.15;      /* headings */
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;       /* body (CJK) */
  --lh-loose:   1.85;      /* long-read paragraphs */

  /* ── Spacing scale (4/8 base) ─────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-8:  48px;
  --space-10: 64px;
  --space-12: 96px;
  --space-14: 128px;
  --space-16: 160px;

  /* ── Radii ─────────────────────────────────────────────
     seh STUDIO uses square edges by default.
     Corner radius is editorial, not decorative. */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-full: 9999px;

  /* ── Hairlines & dividers ─────────────────────────────── */
  --hairline: 1px;

  /* ── Shadows (extremely restrained) ──────────────────── */
  --shadow-none: none;
  --shadow-focus: 0 0 0 2px var(--red-30);

  /* ── Motion ───────────────────────────────────────────── */
  --dur-fast:    200ms;
  --dur-normal:  300ms;
  --dur-slow:    500ms;
  --dur-xslow:   700ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ─────────────────────────────────────────── */
  --container-max: 1600px;
  --gutter-mobile: 24px;
  --gutter-desk:   48px;
  --nav-h-mobile:  64px;
  --nav-h-desk:    80px;
}

/* ─────────────────────────────────────────────────────────────
   Base elements
   ───────────────────────────────────────────────────────────── */

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}

/* ── Semantic type styles ─────────────────────────────────── */

.h-mega, h1.mega {
  font-family: var(--font-serif);
  font-weight: var(--fw-black);
  font-size: var(--fs-mega);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--fg1);
}

.h-hero, h1 {
  font-family: var(--font-serif);
  font-weight: var(--fw-black);
  font-size: var(--fs-hero);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-heading);
  color: var(--fg1);
  margin: 0;
}

.h-display, h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-black);
  font-size: var(--fs-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-heading);
  color: var(--fg1);
  margin: 0;
}

h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-heading);
  margin: 0;
}

h4 {
  font-family: var(--font-serif);
  font-weight: var(--fw-black);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-heading);
  margin: 0;
}

p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
  margin: 0 0 1em 0;
}

/* Eyebrow — the signature 10–12px tracked caps everywhere */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-ultra);
  text-transform: uppercase;
  color: var(--fg2);
}

/* Small caption / meta */
.meta, .caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--fg2);
}

/* Mono (for data / codes / numbers) */
code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Selection */
::selection { background: var(--red); color: var(--paper); }

/* Dark section override — matches .section-dark in globals.css */
.section-dark {
  --bg:   var(--ink);
  --fg1:  var(--paper);
  --fg2:  var(--smoke);
  --line: rgba(255, 255, 255, 0.10);
  background: var(--ink);
  color: var(--paper);
}