/* 22 PF — Design Tokens (locked, editorial system)
 * Calibrated palette + typography scale per pixel-accurate spec.
 * Single source of truth. No raw values elsewhere.
 */

:root {
  /* ── Backgrounds (warm, human, HR-relevant) ──────────── */
  --bg-main:    #F6F4EF;
  --bg-soft:    #F2EFE9;
  --bg-card:    #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-band:    #F2EFE9;
  --bg-subtle:  #F2EFE9;
  --bg-active:  #EDEAE3;

  /* ── Text ─────────────────────────────────────────────── */
  --ink-primary:   #1F1F1F;
  --ink-secondary: #5F5A54;
  --ink-tertiary:  #9A948C;

  /* ── Borders ──────────────────────────────────────────── */
  --border-light: #E6E1D9;
  --border-mid:   #D8D2C8;

  /* ── Multi-color accent system (HR-friendly) ──────────── */
  --green-soft:  #6FA58B;
  --orange-soft: #E6A65D;
  --blue-soft:   #6C8FBF;
  --purple-soft: #9A84C7;
  --red-soft:    #D97C6F;
  --teal-soft:   #6FAFB0;
  --gold-soft:   #C7A86C;

  /* Pastel tints (10% versions for icon backgrounds) */
  --green-tint:  #E2EFE9;
  --orange-tint: #FAEEDB;
  --blue-tint:   #E2EAF3;
  --purple-tint: #ECE5F2;
  --red-tint:    #F7E2DD;
  --teal-tint:   #E2EFEF;
  --gold-tint:   #F4ECDA;

  /* Legacy aliases */
  --accent-trust:  var(--green-soft);
  --accent-desire: var(--red-soft);

  /* ── Interaction ──────────────────────────────────────── */
  --ink-hover:  #111111;
  --focus-ring: rgba(0,0,0,0.08);

  /* ── Aliases (older app.css/demo.css references) ──────── */
  --surface-cream:             var(--bg-main);
  --surface-cream-warm:        var(--bg-subtle);
  --surface-ink:               var(--ink-primary);
  --text-primary-on-cream:     var(--ink-primary);
  --text-secondary-on-cream:   var(--ink-secondary);
  --text-primary-on-ink:       #F2F0EC;
  --text-secondary-on-ink:     #B5B0A4;

  /* ── Typography ───────────────────────────────────────── */
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:  "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --type-hero: 60px;
  --type-hero-tablet: 42px;
  --type-section: 28px;
  --type-card-title: 20px;
  --type-body: 17px;
  --type-lede: 18px;
  --type-meta: 13px;
  --type-anchor: 14px;
  --type-code: 14px;

  /* ── Spacing scale (4-base, tightened for business density) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 14px;
  --space-5: 18px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 44px;
  --space-9: 60px;

  /* ── Layout ───────────────────────────────────────────── */
  --content-max: 1100px;
  --pad-x: 40px;
  --section-gap: 36px;
  --card-pad: 14px;
  --sidebar-w: 220px;

  /* ── Radii & elevation ────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --shadow-faint: 0 1px 0 rgba(0,0,0,0.03);

  /* ── Motion ───────────────────────────────────────────── */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* ── Dot scale (Likert, demo) ─────────────────────────── */
  --dot-base: 14px;
  --dot-hover: 22px;
  --dot-stroke: 1.5px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
  }
}