/* Irrelevant Machines — Design Tokens
   Source: tokens/design-tokens.json v1.0.0
   Generated: 2026-05-17 */

/* ── Fonts ─────────────────────────────────────────── */
@font-face {
  font-family: 'General Sans';
  src: url('/static/assets/fonts/GeneralSans-Variable.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('/static/assets/fonts/GeneralSans-VariableItalic.woff2') format('woff2');
  font-weight: 200 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/assets/fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Base tokens (contrast-γ default) ──────────────── */
:root,
:root[data-contrast="gamma"] {
  /* Gun metal scale */
  --color-gm-darkest:  #2A2D32;
  --color-gm-dark:     #3F4248;
  --color-gm-medium:   #5A5F66;
  --color-gm-light:    #6B7079;
  --color-gm-lighter:  #8A8F96;

  /* Backgrounds */
  --color-bg-canvas:   #FAFAFB;
  --color-bg-card:     #FFFFFF;
  --color-bg-subtle:   #F4F5F7;
  --color-bg-parchment:#F7F2E8;

  /* Accents */
  --color-cobalt:      #0047AB;
  --color-cobalt-hover:#003A8C;
  --color-ochre:       #B8860B;
  --color-charcoal:    #1F2025;

  /* Semantic */
  --color-success:     #0F7A3A;
  --color-warning:     #B85C00;
  --color-error:       #A02828;

  /* Contrast-γ (WCAG AAA) */
  --bg-canvas:         #FAFAFB;
  --bg-card:           #FFFFFF;
  --ink-primary:       #2A2D32;
  --ink-secondary:     #3F4248;
  --ink-tertiary:      #6B7079;

  /* Graph */
  --graph-edge-color:  #6B7079;
  --graph-edge-opacity: 0.25;
  --graph-ring-color:  #0047AB;
}

/* Contrast-β (WCAG AA+) */
:root[data-contrast="beta"] {
  --bg-canvas:         #F0EFEC;
  --bg-card:           #FAFAFA;
  --ink-primary:       #3F4248;
  --ink-secondary:     #5A5F66;
  --ink-tertiary:      #7A7F86;
}

/* Contrast-α (WCAG AA) */
:root[data-contrast="alpha"] {
  --bg-canvas:         #DEDFE2;
  --bg-card:           #EAEBED;
  --ink-primary:       #4F545C;
  --ink-secondary:     #6B7079;
  --ink-tertiary:      #8A8F96;
}

/* ── Typography ─────────────────────────────────────── */
:root {
  --font-sans: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', Menlo, Consolas, 'Courier New', monospace;

  --font-display: 6rem;
  --font-h1:      4rem;
  --font-h2:      2.5rem;
  --font-h3:      1.75rem;
  --font-lead:    1.25rem;
  --font-body:    1rem;
  --font-small:   0.875rem;
  --font-mono:    0.8125rem;
  --font-micro:   0.6875rem;

  --lh-display: 1.05;
  --lh-h1:      1.1;
  --lh-h2:      1.15;
  --lh-h3:      1.25;
  --lh-lead:    1.4;
  --lh-body:    1.55;
  --lh-small:   1.5;

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.05em;

  --fw-extralight: 200;
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;

  /* ── Spacing ─────────────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ── Radius ──────────────────────────────────────── */
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   12px;
  --r-pill: 9999px;

  /* ── Borders ─────────────────────────────────────── */
  --b-thin:   1px;
  --b-medium: 2px;
  --b-thick:  3px;

  /* ── Shadows ─────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(42,45,50,0.05);
  --shadow-md: 0 4px 8px rgba(42,45,50,0.08);
  --shadow-lg: 0 12px 24px rgba(42,45,50,0.12);

  /* ── Motion ──────────────────────────────────────── */
  --dur-instant:  100ms;
  --dur-fast:     200ms;
  --dur-default:  240ms;
  --dur-graph:    600ms;
  --dur-pulse:    1500ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ── Breakpoints (reference only) ───────────────── */
  --bp-tablet:  768px;
  --bp-desktop: 1280px;
  --bp-wide:    1920px;

  /* ── Graph node colours ──────────────────────────── */
  --node-piloto:     #0047AB;
  --node-carro:      #B8860B;
  --node-marca:      #5A5F66;
  --node-corrida:    #1F2025;
  --node-era:        #B8860B;
  --node-engenheiro: #0047AB;
}

/* ── Reset & base ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: var(--font-sans);
  font-size: 16px;
  background: var(--bg-canvas);
  color: var(--ink-primary);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur-default) var(--ease-default),
              color var(--dur-default) var(--ease-default);
}

body { min-height: 100vh; }

a { color: var(--color-cobalt); text-decoration: none; }
a:hover { color: var(--color-cobalt-hover); }

/* ── Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Utility classes ────────────────────────────────── */
.mono        { font-family: var(--font-mono); }
.ink-primary { color: var(--ink-primary); }
.ink-secondary { color: var(--ink-secondary); }
.ink-tertiary  { color: var(--ink-tertiary); }
.bg-parchment  { background: var(--color-bg-parchment); }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* ── Version badge ──────────────────────────────────── */
.version-badge {
  position: fixed; bottom: var(--sp-3); left: var(--sp-3);
  font-family: var(--font-mono); font-size: 0.625rem;
  color: transparent; background: transparent;
  transition: color var(--dur-fast);
  z-index: 9999; pointer-events: none; user-select: none;
}
.version-badge:hover { color: var(--ink-tertiary); }