/* ============================================================
   ANGELWERK · DESIGN TOKENS
   Lifted from the production tokens.css + components.css.
   Every themable surface is a CSS custom property; a tenant
   theme overrides only --accent and optionally --font-display.
   ============================================================ */

@font-face {
  font-family: "Instrument Serif Local";
  src: url("./fonts/InstrumentSerif-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif Local";
  src: url("./fonts/InstrumentSerif-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Convenience: Google Fonts as a fallback CDN load — the codebase ships
   fonts via `next/font` so files don't live in repo. We pull the same
   four families here. The .ttf @font-face blocks above are the offline
   slot — drop files into ./fonts/ to wire them up. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&family=Archivo+Narrow:wght@400;500;600&display=swap");

:root {
  /* ─── Type families ─────────────────────────────────────── */
  --font-display: "Instrument Serif", "Instrument Serif Local", "Iowan Old Style", Georgia, serif;
  --font-ui: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ─── Type scale (4px rhythm) ───────────────────────────── */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 26px;
  --fs-2xl: 34px;
  --fs-3xl: 48px;
  --fs-4xl: 72px;
  --fs-5xl: 104px;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-base: 1.5;
  --lh-loose: 1.65;

  --tracking-tight: -0.02em;
  --tracking-base: 0;
  --tracking-wide: 0.06em;
  --tracking-mono: -0.01em;

  /* ─── Spacing (4px base) ────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ─── Radii ─────────────────────────────────────────────── */
  --r-none: 0;
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  --bw: 1px;

  /* ─── Neutrals — warm-leaning, OKLCH paper→ink ─────────── */
  --paper:       oklch(0.985 0.004 75);  /* page surface */
  --paper-2:     oklch(0.965 0.005 75);  /* sunken / card hover */
  --paper-3:     oklch(0.945 0.006 75);  /* placeholder */
  --line:        oklch(0.880 0.006 75);  /* hairline rules + dividers */
  --line-2:      oklch(0.920 0.006 75);  /* fainter inner rules */
  --line-strong: oklch(0.780 0.008 75);  /* input borders, secondary btn */
  --mute:        oklch(0.620 0.008 75);  /* captions + meta */
  --ink-2:       oklch(0.500 0.008 75);  /* body text */
  --ink-1:       oklch(0.300 0.010 75);  /* default text */
  --ink-deep:    oklch(0.180 0.012 75);  /* display, primary btn bg */

  /* Back-compat alias used by some components in the codebase */
  --ink: var(--ink-1);

  /* ─── Status (semantic; theme-independent) ─────────────── */
  --ok:        oklch(0.500 0.100 150);
  --ok-bg:     oklch(0.960 0.040 150);
  --warn:      oklch(0.550 0.120 60);
  --warn-bg:   oklch(0.960 0.050 85);
  --danger:    oklch(0.500 0.180 25);
  --danger-bg: oklch(0.960 0.040 25);
  --info:      oklch(0.550 0.100 230);
  --info-bg:   oklch(0.960 0.030 230);
  --bad: var(--danger);
  --bad-bg: var(--danger-bg);

  /* ─── Accent (per-tenant; default = forelle) ───────────── */
  --accent:      oklch(0.42 0.075 215);
  --accent-soft: color-mix(in oklab, var(--accent) 12%, var(--paper));
  --accent-line: color-mix(in oklab, var(--accent) 35%, var(--paper));
  --accent-ink:  oklch(0.985 0.004 75); /* foreground on accent */
  --accent-deep: color-mix(in oklab, var(--accent) 80%, var(--ink-deep));

  /* ─── Surfaces (composed) ──────────────────────────────── */
  --surface:        var(--paper);
  --surface-sunk:   var(--paper-2);
  --surface-raised: var(--paper);

  /* ─── Focus ring ───────────────────────────────────────── */
  --ring: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent);
}

/* ============================================================
   THEMES — only --accent (and optionally --font-display) shift.
   Six tenants, named after native German freshwater fish.
   ============================================================ */
[data-theme="forelle"] { --accent: oklch(0.42 0.075 215); } /* trout · still-water teal */
[data-theme="hecht"]   { --accent: oklch(0.40 0.085 155); } /* pike  · deep forest */
[data-theme="karpfen"] { --accent: oklch(0.50 0.110 65);  } /* carp  · burnished bronze */
[data-theme="saibling"]{ --accent: oklch(0.52 0.115 25);  } /* char  · dusty rose */
[data-theme="lachs"]   { --accent: oklch(0.60 0.150 35);  } /* salmon · coral */
[data-theme="aal"]     { --accent: oklch(0.30 0.020 255); } /* eel   · graphite */

/* Derived accent tokens recompute per element bearing data-theme so
   the override propagates to color-mix() results, not just the raw
   --accent value. */
[data-theme] {
  --accent-soft: color-mix(in oklab, var(--accent) 12%, var(--paper));
  --accent-line: color-mix(in oklab, var(--accent) 35%, var(--paper));
  --accent-deep: color-mix(in oklab, var(--accent) 80%, var(--ink-deep));
  --ring: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent);
}

/* Display-font variants a club can choose (rare; mostly: leave serif) */
[data-display="serif"]     { --font-display: "Instrument Serif", Georgia, serif; }
[data-display="grotesk"]   { --font-display: "Geist", "Helvetica Neue", sans-serif; --tracking-tight: -0.035em; }
[data-display="condensed"] { --font-display: "Archivo Narrow", "Helvetica Neue Condensed", sans-serif; --tracking-tight: -0.01em; }

/* ============================================================
   SEMANTIC TYPE PRIMITIVES
   Use these utility classes for editorial copy + UI labels.
   ============================================================ */
.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--ink-deep);
}
.t-display em { font-style: italic; color: var(--accent); }

.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--mute);
}

.t-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.t-body {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--ink-2);
  max-width: 62ch;
}

.t-caption {
  font-size: var(--fs-xs);
  color: var(--mute);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mono);
}

/* ============================================================
   HEADINGS — coarse map for prose contexts.
   Section heads in the marketing site use t-display directly;
   these are for documents and editor surfaces.
   ============================================================ */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-deep);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-deep);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-deep);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--ink-deep);
  margin: 0;
}
p {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--ink-2);
  margin: 0;
}
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.95em;
  letter-spacing: var(--tracking-mono);
}