/* ============================================================
   TRAINSNAP · DESIGN TOKENS
   One source of truth consumed by all pages.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');

:root {
  /* --- INK & PAPER (core monochrome) --- */
  --ink-000: #000000;          /* pure logo black */
  --ink-900: #0b0b0c;          /* body text, surfaces */
  --ink-700: #2a2a2d;
  --ink-500: #6b6b72;
  --ink-300: #b5b5bb;
  --ink-200: #d9d9dd;
  --ink-100: #eceded;
  --ink-050: #f4f4f2;          /* warm paper */
  --paper:   #fafaf7;          /* default page bg — subtly warm, not pure white */
  --white:   #ffffff;

  /* --- SIGNAL (rail-warning amber) --- */
  --signal:        oklch(0.78 0.15 75);   /* primary alert */
  --signal-ink:    oklch(0.38 0.12 60);   /* for text on signal */
  --signal-wash:   oklch(0.96 0.04 80);   /* soft bg tint */

  /* --- STATUS semantics --- */
  --status-clear:    oklch(0.70 0.14 150);   /* green, "crossing clear" */
  --status-blocked:  oklch(0.62 0.22 25);    /* red, "train passing" */
  --status-soon:     oklch(0.78 0.15 75);    /* amber, "approaching" */
  --status-unknown:  var(--ink-300);

  /* --- TYPE --- */
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (desktop) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  40px;
  --fs-3xl:  56px;
  --fs-4xl:  80px;
  --fs-5xl:  120px;
  --fs-hero: 168px;

  /* --- SPACING (8-point) --- */
  --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;

  /* --- RADII --- */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* --- STROKE (logo-derived bar thickness) --- */
  --bar: 2px;           /* default rule */
  --bar-bold: 4px;
  --bar-heavy: 8px;

  /* --- MOTION --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 520ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mono { font-family: var(--font-mono); font-feature-settings: 'ss01', 'zero'; }
.display { font-family: var(--font-display); letter-spacing: -0.02em; }

/* --- Shared components --- */

/* horizontal bar (logo motif) */
.ts-rule { height: var(--bar); background: var(--ink-900); width: 100%; }
.ts-rule--bold { height: var(--bar-bold); }
.ts-rule--heavy { height: var(--bar-heavy); }
.ts-rule--double {
  height: 8px;
  background: linear-gradient(to bottom,
    var(--ink-900) 0, var(--ink-900) 2px,
    transparent 2px, transparent 6px,
    var(--ink-900) 6px, var(--ink-900) 8px);
}

/* eyebrow / section label */
.ts-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-700);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ts-eyebrow::before {
  content: "";
  width: 18px; height: 2px; background: var(--ink-900);
}

/* button primary */
.ts-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--ink-900);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ts-btn:hover { transform: translateY(-1px); background: #000; }
.ts-btn--ghost { background: transparent; color: var(--ink-900); border: 1px solid var(--ink-900); }
.ts-btn--ghost:hover { background: var(--ink-900); color: var(--paper); }
.ts-btn--signal { background: var(--signal); color: var(--ink-900); }

/* status dot */
.ts-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.ts-dot--clear   { background: var(--status-clear); }
.ts-dot--blocked { background: var(--status-blocked); animation: pulse 1.6s var(--ease) infinite; }
.ts-dot--soon    { background: var(--status-soon); }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0.2); }
  50%      { box-shadow: 0 0 0 6px rgba(0,0,0,0); }
}

/* focus */
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }