/* tokens.css — Design system foundation
   All values defined here. Never use raw values in section CSS. */

:root {

  /* ─── Colors ─────────────────────────────────── */

  --color-bg:              #0d0d0f;
  --color-bg-hero:         #0c1121;   /* dark navy — hero section only */
  --color-surface:         #141418;
  --color-surface-raised:  #1a1a20;
  --color-border:          #252530;
  --color-border-subtle:   #1a1a26;  /* raised from #171720 — was invisible */

  --color-text-primary:    #ededee;
  --color-text-secondary:  #9090a2;
  --color-text-muted:      #62627a;  /* raised from #46465a — was near-invisible */

  --color-accent:          #5a7fff;
  --color-accent-dim:      #1e2a5a;
  --color-accent-hover:    #7a9aff;

  --color-canvas-base:     #09090d;
  --color-canvas-hero:     #0a0f1e;  /* hero canvas fill — navy-tinted */

  /* ─── Typography: Scale ──────────────────────── */

  --text-xs:    0.6875rem;   /* 11px */
  --text-sm:    0.8125rem;   /* 13px */
  --text-base:  1rem;        /* 16px */
  --text-lg:    1.1875rem;   /* 19px */
  --text-xl:    1.5rem;      /* 24px */
  --text-2xl:   2.125rem;    /* 34px */
  --text-3xl:   3rem;        /* 48px */
  --text-4xl:   4.25rem;     /* 68px */
  --text-5xl:   5.5rem;      /* 88px */

  /* ─── Typography: Families ───────────────────── */

  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Mono', monospace;

  /* ─── Typography: Weights ────────────────────── */

  --font-light:   300;
  --font-regular: 400;
  --font-medium:  500;
  --font-semi:    600;

  /* ─── Spacing (4px base unit) ────────────────── */

  --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;

  /* ─── Layout ─────────────────────────────────── */

  --max-width:         1200px;
  --content-width:     760px;
  --section-pad-y:     var(--s-24);
  --section-pad-x:     var(--s-8);

  /* ─── Borders ────────────────────────────────── */

  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;

  /* ─── Transitions ────────────────────────────── */

  --ease-ui:       150ms ease;
  --ease-content:  280ms ease;

}

/* ─── Responsive overrides ──────────────────────── */

@media (max-width: 640px) {
  :root {
    --text-4xl:   2.75rem;
    --text-3xl:   2rem;
    --section-pad-x: var(--s-5);
    --section-pad-y: var(--s-16);
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  :root {
    --text-4xl:   3.5rem;
    --section-pad-x: var(--s-6);
  }
}