/* ============================================
   ThoughtField — Design Tokens
   Single source of truth for tokens shared with iOS via design-tokens.md.

   Two name systems coexist during the rollout:
   - Legacy `--color-*`, `--line-height`, `--letter-spacing`, `--font-*`
   - design.md names: `--paper`, `--ink`, `--mid`, `--fade`, `--ghost`,
     `--accent`, `--presence`, text ramp, spacing scale, motion, materials, z

   Where the two refer to the same concept, design.md names alias the
   legacy values so existing code continues to render identically.

   See design-tokens.md for the authoritative spec.
   ============================================ */

:root {
  /* ---- Color: legacy + design.md aliases ---- */
  --color-bg: #fafafa;
  --color-paper: var(--color-bg);
  --color-ink: #111111;
  --color-mid: #666666;
  --color-fade: #aaaaaa;
  --color-ghost: #d0d0d0;
  --color-accent: #7B3FF2;

  --paper:  var(--color-bg);
  --ink:    var(--color-ink);
  --mid:    var(--color-mid);
  --fade:   var(--color-fade);
  --ghost:  var(--color-ghost);
  --accent: var(--color-accent);
  --presence: var(--accent);

  /* ---- Data viz: heatmap scale (design.md §3 Color) ---- */
  --heat-0: rgba(0, 0, 0, 0.05);
  --heat-1: #f6d8a8;
  --heat-2: #f0b97a;
  --heat-3: #d99347;
  --heat-4: #a35e1c;

  /* ---- Typography: families ---- */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-literary: 'Space Grotesk', system-ui, sans-serif;

  /* ---- Typography: ramp (design.md §3) ---- */
  --text-quiet: 0.72rem;
  --text-small: 0.85rem;
  --text-body:  1rem;
  --text-room:  1.1rem;
  --text-stage: clamp(1.4rem, 1.2rem + 1vw, 2rem);

  /* ---- Typography: line-height + letter-spacing ----
     Legacy --line-height stays at 1.75; design.md "literary" matches.
     design.md's 1.6 default is deferred until existing usage is swept. */
  --line-height: 1.75;
  --line-height-literary: var(--line-height);
  --letter-spacing: 0.01em;
  --letter-spacing-stage: 0.04em;

  /* ---- Spacing scale (design.md §3) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 14px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 80px;
  --space-room:  var(--space-5);
  --space-stage: var(--space-6);

  /* ---- Motion (design.md §3) ---- */
  --motion-quick: 120ms;
  --motion-soft:  320ms;
  --motion-slow:  800ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---- Materials (design.md §3) ----
     srgb is the safe default — works everywhere. oklch is a progressive
     enhancement applied via @supports below; it gives a perceptually
     better gradient on Safari 16.4+ but isn't required for the design
     to land correctly. */
  --material-matte:        var(--paper);
  --material-glass-bg:     color-mix(in srgb, var(--paper) 70%, transparent);
  --material-glass-filter: blur(24px) saturate(180%);
  --material-edge:         linear-gradient(180deg,
                             color-mix(in srgb, var(--paper) 12%, transparent),
                             transparent 1px);

  /* ---- z-index ---- */
  --z-glass: 50;
  --z-modal: 100;

  /* ---- Face SVG (preserved from legacy) ---- */
  --face-stroke: 6px;
  --face-color: var(--color-ink);
}

body.inverted {
  --color-bg: #111111;
  --color-paper: var(--color-bg);
  --color-ink: #e8e8e8;
  --color-mid: #999999;
  --color-fade: #666666;
  --color-ghost: #333333;
  --color-accent: #9D5FFF;
  --face-color: var(--color-ink);

  /* design.md aliases must redeclare in inverted scope.
     CSS resolves var() at the declaring element's computed-value time,
     not at use time — so --paper declared only in :root freezes to the
     light-mode value and stops following --color-bg. Redeclare here. */
  --paper:    var(--color-bg);
  --ink:      var(--color-ink);
  --mid:      var(--color-mid);
  --fade:     var(--color-fade);
  --ghost:    var(--color-ghost);
  --accent:   var(--color-accent);
  --presence: var(--accent);

  /* Glass materials recompute against the inverted --paper. */
  --material-matte:    var(--paper);
  --material-glass-bg: color-mix(in srgb, var(--paper) 70%, transparent);
  --material-edge:     linear-gradient(180deg,
                         color-mix(in srgb, var(--paper) 12%, transparent),
                         transparent 1px);
}

/* Progressive enhancement: oklch color-mix on Safari 16.4+ / Chrome 111+ /
   Firefox 113+. Gives a perceptually better gradient where supported.
   Falls through to the srgb defaults above otherwise. */
@supports (color: color-mix(in oklch, white, black)) {
  :root {
    --material-glass-bg: color-mix(in oklch, var(--paper) 70%, transparent);
    --material-edge:     linear-gradient(180deg,
                           color-mix(in oklch, var(--paper) 12%, transparent),
                           transparent 1px);
  }
  body.inverted {
    --material-glass-bg: color-mix(in oklch, var(--paper) 70%, transparent);
    --material-edge:     linear-gradient(180deg,
                           color-mix(in oklch, var(--paper) 12%, transparent),
                           transparent 1px);
  }
}