/* STRIKE design tokens. Shared by every logo page, homepage concept and the gallery.
   Spacing on a 4 px grid, radii 6/10/16, one type scale, one core palette.
   Each homepage sets its own --accent and may tint --bg/--surface slightly. */

:root {
  /* spacing, 4 px grid */
  --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; --s-32: 128px;

  /* radii */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px;

  /* type scale */
  --t-xs: 12px; --t-sm: 13px; --t-md: 15px; --t-lg: 18px; --t-xl: 22px;
  --t-2xl: 28px; --t-3xl: 40px; --t-4xl: 56px; --t-5xl: 72px;
  --lh-tight: 1.05; --lh-snug: 1.2; --lh-base: 1.5;
  --track-tight: -0.02em; --track-caps: 0.06em;

  /* fonts (loaded per page from Google Fonts; the *Fallback faces below are metric-matched
     local fonts so text does not jump when the web font arrives) */
  --f-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-grotesk: "Space Grotesk", "Space Grotesk Fallback", "Inter", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --f-display: "Bebas Neue", "Bebas Neue Fallback", "Inter", sans-serif;

  /* core palette */
  --bg: #0b0c10;
  --surface: #13151b;
  --surface-2: #1a1d26;
  --border: #232633;
  --text: #eceef3;
  --muted: #8c93a6;
  --call: #2ee6a6;
  --put: #ff5470;
  --accent: #4f7cff;       /* overridden per concept */
  --accent-ink: #0b0c10;   /* text on top of the accent */

  /* per-concept accents, for reference */
  --accent-terminal: #ffb547;
  --accent-object: #4f7cff;
  --accent-editorial: #eceef3;
  --accent-arcade: #ff7a1a;
  --accent-glass: #b69cff;

  /* motion */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.3,.64,1);
  --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 600ms;

  color-scheme: dark;
}

@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 107.12%; ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; }
@font-face { font-family: "Space Grotesk Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 105%; ascent-override: 93.7%; descent-override: 27.8%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Mono Fallback"; src: local("Courier New"), local("Courier"); size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }
@font-face { font-family: "Bebas Neue Fallback"; src: local("Impact"), local("Arial Narrow"); size-adjust: 92%; ascent-override: 100%; descent-override: 30%; line-gap-override: 0%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-sans);
  font-size: var(--t-md);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.call { color: var(--call); }
.put { color: var(--put); }
.muted { color: var(--muted); }

/* themed scrollbars, both engines */
* { scrollbar-width: thin; scrollbar-color: #363a4a transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #363a4a; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #4a4f63; background-clip: content-box; }

/* focus */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

/* wordmark */
.wordmark {
  font-family: var(--f-sans);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  line-height: 1;
}

/* reduced motion: every page respects this; scripts also check it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}