/* ============================================================
   cpfischer.com: design tokens
   Brand palette is the documented 5-token system (docs/DESIGN.md).
   Surfaces below are derived from those 5, not new brand colors.
   ============================================================ */

:root {
  /* Brand palette: 5 tokens only */
  --ink:        #212121;  /* primary text on light backgrounds */
  --ink-soft:   #3b3b40;  /* secondary text, captions, mono labels, hairlines */
  --paper:      #ffffff;  /* primary background */
  --paper-soft: #f2f2f2;  /* alternate surfaces, placeholder ground */
  --accent:     #04adbf;  /* electric teal, one deliberate moment per section */

  /* Derived surfaces (computed from the 5 brand tokens) */
  --hairline:  color-mix(in srgb, var(--ink) 14%, transparent);
  --ph-stripe: color-mix(in srgb, var(--ink) 6%, var(--paper-soft));
  --foot-bg:   var(--ink);    /* footer flips to ink: the one dark surface in light mode */
  --foot-fg:   var(--paper);
  --foot-mute: color-mix(in srgb, var(--foot-fg) 56%, var(--foot-bg));
  --foot-line: color-mix(in srgb, var(--foot-fg) 18%, transparent);

  color-scheme: light dark;

  /* Type families (two faces, per docs/DESIGN.md) */
  --font-display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Display weights (documented: 700/800/900) */
  --w-display: 700;
  --w-strong:  800;

  /* Fluid type scale */
  --t-hero:  clamp(2.85rem, 8.2vw, 8.5rem);
  --t-h2:    clamp(2rem, 5.5vw, 4.75rem);
  --t-h3:    clamp(1.6rem, 3.4vw, 3rem);
  --t-lead:  clamp(1.2rem, 2vw, 1.6rem);
  --t-body:  clamp(1.02rem, 1.1vw, 1.15rem);
  --t-micro: 0.8rem;

  /* Rhythm */
  --pad:    clamp(1.5rem, 5vw, 6rem);
  --maxw:   1560px;
  --ease:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --nav-h:  4rem;

  /* Motion (single source for transition timing) */
  --t-fast: 0.2s;
  --t-base: 0.25s;
  --t-slow: 0.45s;

  /* Elevation */
  --shadow-panel: 0 18px 40px -26px rgba(0, 0, 0, 0.45);

  /* Focus */
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 3px;
}

/* ---------- Dark theme: invert ink/paper, keep the accent ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #f2f2f2;
    --ink-soft:   #b7b7bd;
    --paper:      #1a1a1b;
    --paper-soft: #242427;
    --accent:     #04adbf;

    --hairline:  color-mix(in srgb, var(--ink) 16%, transparent);
    --ph-stripe: color-mix(in srgb, var(--ink) 8%, var(--paper-soft));
    --foot-bg:   #0e0e0f;   /* deepest block: the page settles to near-black */
    --foot-fg:   #f2f2f2;
    --foot-mute: color-mix(in srgb, var(--foot-fg) 50%, var(--foot-bg));
    --foot-line: color-mix(in srgb, var(--foot-fg) 14%, transparent);
  }
}