/* Abracade design tokens — generated from brand/abracade.json (identity v1, 2026-07-03).
 * The repo is the source of truth for app, web, and socials.
 * Light is default; dark via prefers-color-scheme or [data-theme="dark"]. */

:root {
  /* color */
  --ab-bg: #FAFAF7;
  --ab-ink: #111111;
  --ab-accent: #2F7A5B;
  --ab-muted: #8B8B86;
  --ab-surface: #FFFFFF;
  --ab-hairline: #E4E4DF;

  /* type */
  --ab-font-brand: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ab-font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --ab-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --ab-text-xs: 12px;
  --ab-text-sm: 13.5px;
  --ab-text-md: 15px;      /* body */
  --ab-text-lg: 19px;
  --ab-text-xl: 26px;
  --ab-text-display: 40px; /* brand moments: Space Grotesk Medium, lowercase, +2% tracking */
  --ab-tracking-brand: 0.02em;

  /* space (4px base) & radius */
  --ab-space-1: 4px;  --ab-space-2: 8px;  --ab-space-3: 12px; --ab-space-4: 16px;
  --ab-space-5: 24px; --ab-space-6: 32px; --ab-space-7: 48px; --ab-space-8: 72px;
  --ab-radius-s: 7px; --ab-radius-m: 12px; --ab-radius-l: 22px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ab-bg: #141414;       /* never pure black */
    --ab-ink: #F2F2EE;
    --ab-accent: #6FBF97;
    --ab-muted: #6E6E69;
    --ab-surface: #1D1D1B;
    --ab-hairline: #2A2A27;
  }
}
[data-theme="light"] {
  --ab-bg: #FAFAF7; --ab-ink: #111111; --ab-accent: #2F7A5B;
  --ab-muted: #8B8B86; --ab-surface: #FFFFFF; --ab-hairline: #E4E4DF;
}
[data-theme="dark"] {
  --ab-bg: #141414; --ab-ink: #F2F2EE; --ab-accent: #6FBF97;
  --ab-muted: #6E6E69; --ab-surface: #1D1D1B; --ab-hairline: #2A2A27;
}

/* Rules (see brand/abracade-identity.md):
 * - The mark & wordmark are always --ab-ink. --ab-accent is for interactive states
 *   only (links, focus, progress) and never appears on the mark.
 * - Near-monochrome always: the games supply the color; the platform stays grey. */