/* ──────────────────────────────────────────────────────────────────────────
   tokens.css — Brand design tokens for the kaganerkan personal site.

   Source of truth: ../branding.md and the canonical brand-system contract at
   skill://kaganerkan-brand-design/references/brand-system.md.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* ── inks (DO NOT extend) ─────────────────────────────────────────────── */
  --navy:    #1A2744; /* primary text, framing, dark fields, primary actions  */
  --blue:    #4A6FA5; /* accent, emphasis, selected state, grid, hard shadow  */
  --cream:   #D6D0CA; /* borders, dividers, disabled treatment               */
  --sand:    #F5F3F0; /* light surface, page/tile background                 */
  --white:   #FFFFFF; /* panels, reversed glyphs, supplied white icons       */

  /* ── pixel grid & geometry ────────────────────────────────────────────── */
  --px: 2px;
  --space:   16px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  --hard:        3px 3px 0 var(--navy);
  --hard-blue:   3px 3px 0 var(--blue);
  --hard-soft:   3px 3px 0 var(--cream);
  --card-shadow: 8px 8px 0 #0E1526;

  --border:        3px solid var(--navy);
  --border-thick:  4px solid var(--navy);

  /* ── typography ───────────────────────────────────────────────────────── */
  --font-display: 'Silkscreen', monospace;
  --font-body:    'VT323', monospace;
  --font-code:    'DotGothic16', monospace;

  --bp-narrow: 620px;
  --bp-wide:   960px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}