/* tokens.css — Tokei Kyokushinkai design system tokens.
 * Single source of truth for palette, type, spacing, radius, shadow, layout.
 * Mobile-first. Breakpoints documented as comments — CSS custom properties
 * cannot be used inside @media queries.
 *
 * Breakpoints:
 *   mobile  — default (< 600px)
 *   tablet  — @media (min-width: 600px)
 *   desktop — @media (min-width: 1024px)
 *   wide    — @media (min-width: 1440px)
 */

:root {
  /* --- Palette --- */
  --ink: #0c0c0c;                /* dominant dark */
  --ink-soft: #1f1f1f;           /* raised surfaces on dark */
  --paper: #fafaf7;              /* warm off-white background */
  --paper-soft: #f1ede4;         /* subtle surface tint, cards on paper */
  --rule: #d9d4c5;               /* dividers, hairline borders */
  --kyokushin-red: #c8102e;      /* primary accent — IKO-aligned */
  --kyokushin-red-deep: #8c0a1f; /* hover/pressed */
  --gold: #c9a25a;               /* highlight; used sparingly */
  --text: #0c0c0c;               /* body on paper */
  --text-muted: #555048;         /* secondary copy */
  --text-inverse: #fafaf7;       /* on ink */

  /* --- Status colours (subscription pills, etc.) --- */
  --status-active-bg: #1f3a25;
  --status-active-fg: #d4f1d8;
  --status-cancelled-bg: #3a2222;
  --status-cancelled-fg: #f1d4d4;
  --status-past-due-bg: #3a3322;
  --status-past-due-fg: #f1e6c4;

  /* --- Typography --- */
  --font-display: 'Oswald', 'Helvetica Neue Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --fs-display: clamp(3rem, 6vw + 1rem, 5.5rem);
  --fs-h1: clamp(2rem, 3vw + 1rem, 3rem);
  --fs-h2: 1.875rem;
  --fs-h3: 1.375rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;

  --lh-tight: 1.05;  /* display */
  --lh-snug: 1.25;   /* headings */
  --lh-body: 1.6;    /* paragraphs */

  --tracking-display: 0.01em;
  --tracking-tag: 0.12em; /* uppercase tags / eyebrow */

  /* --- Spacing (8px base) --- */
  --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;

  /* --- Radius (no over-rounded; "not playful") --- */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* --- Shadow (kept restrained — no SaaS halo glow) --- */
  --shadow-1: 0 1px 2px rgba(12, 12, 12, 0.08);
  --shadow-2: 0 6px 16px rgba(12, 12, 12, 0.12);

  /* --- Layout --- */
  --max-w-prose: 68ch;
  --max-w-content: 1200px;
  --gutter: var(--s-5);

  /* --- Motion --- */
  --transition-fast: 120ms ease-out;
  --transition-base: 200ms ease-out;
}

/* --- Element resets / base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--paper);
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-4);
  text-transform: uppercase;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--s-4); }

a {
  color: var(--kyokushin-red);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--transition-fast);
}
a:hover { color: var(--kyokushin-red-deep); }
a:focus-visible {
  outline: 2px solid var(--kyokushin-red);
  outline-offset: 3px;
}

img { max-width: 100%; height: auto; display: block; }

hr {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: var(--s-6) 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--ink);
  color: var(--text-inverse);
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* Layout helpers */
.container {
  width: 100%;
  max-width: var(--max-w-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prose {
  max-width: var(--max-w-prose);
  margin-inline: auto;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-tag);
  text-transform: uppercase;
  color: var(--kyokushin-red);
  margin: 0 0 var(--s-2);
}

.muted { color: var(--text-muted); }
.center { text-align: center; }

@media (min-width: 1024px) {
  :root { --gutter: var(--s-6); }
}