/* Trackit design tokens — canonical per design-system.md */
:root {
  /* Brand palette */
  --color-deep-blue: #05062A;
  --color-tech-blue: #0100FC;
  --color-lime: #C3ED04;
  --color-off-white: #ECECEC;

  /* Semantic surfaces */
  --surface-primary: var(--color-deep-blue);
  --surface-inverse: var(--color-off-white);
  --surface-accent: var(--color-tech-blue);
  --surface-signal: var(--color-lime);

  /* Text on dark */
  --text-primary: var(--color-off-white);
  --text-secondary: rgba(236, 236, 236, 0.65);
  --text-tertiary: rgba(236, 236, 236, 0.40);
  --text-on-light: var(--color-deep-blue);
  --text-on-signal: var(--color-deep-blue);

  /* Accent */
  --accent-primary: var(--color-lime);

  /* Borders */
  --border-default: rgba(236, 236, 236, 0.10);
  --border-strong: rgba(236, 236, 236, 0.20);
  --border-active: var(--color-lime);

  /* Spacing — 4px 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-16: 128px;
  --space-20: 160px;

  /* Layout */
  --container-max: 1440px;
  --container-padding: 48px;
  --gutter: 24px;

  /* Radius */
  --radius-none: 0;
  --radius-pill: 9999px;
  --radius-image: 12px;

  /* Type */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Archivo', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Type scale */
  --text-display-xl: 80px;
  --text-display-lg: 56px;
  --text-display-md: 40px;
  --text-display-sm: 28px;
  --text-title: 20px;
  --text-body-lg: 18px;
  --text-body-md: 16px;
  --text-body-sm: 14px;
  --text-label-lg: 14px;
  --text-label-sm: 11px;
  --text-data-lg: 32px;
  --text-data-md: 16px;
  --text-data-sm: 11px;

  /* Backdrop / shadow */
  --backdrop-nav: blur(12px);
  --focus-ring: 0 0 0 2px var(--color-deep-blue), 0 0 0 4px var(--color-lime);
}

/* Base reset + body */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--surface-primary); }
body {
  background: var(--surface-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: var(--color-lime); color: var(--color-deep-blue); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img { display: block; max-width: 100%; height: auto; }

/* Utility typography classes */
.t-display-xl { font-family: var(--font-display); font-weight: 700; font-size: var(--text-display-xl); line-height: 1.0; letter-spacing: -0.02em; }
.t-display-lg { font-family: var(--font-display); font-weight: 700; font-size: var(--text-display-lg); line-height: 1.05; letter-spacing: -0.02em; }
.t-display-md { font-family: var(--font-display); font-weight: 700; font-size: var(--text-display-md); line-height: 1.1; letter-spacing: -0.01em; }
.t-display-sm { font-family: var(--font-display); font-weight: 600; font-size: var(--text-display-sm); line-height: 1.2; }
.t-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-title); line-height: 1.3; }
.t-body-lg { font-size: var(--text-body-lg); line-height: 1.55; }
.t-body-md { font-size: var(--text-body-md); line-height: 1.5; }
.t-body-sm { font-size: var(--text-body-sm); line-height: 1.5; }
.t-label { font-family: var(--font-body); font-weight: 600; font-size: var(--text-label-lg); line-height: 1.2; letter-spacing: 0.04em; }
.t-eyebrow { font-family: var(--font-body); font-weight: 700; font-size: var(--text-label-sm); line-height: 1.0; letter-spacing: 0.16em; text-transform: uppercase; }
.t-data-lg { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-data-lg); line-height: 1.0; letter-spacing: -0.02em; }
.t-data-md { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-data-md); line-height: 1.2; }
.t-data-sm { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-data-sm); line-height: 1.0; letter-spacing: 0.08em; text-transform: uppercase; }

.c-text { color: var(--text-primary); }
.c-secondary { color: var(--text-secondary); }
.c-tertiary { color: var(--text-tertiary); }
.c-lime { color: var(--color-lime); }
.c-blue { color: var(--color-tech-blue); }

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}
@media (max-width: 768px) {
  .container { padding: 0 24px; }
}