/* ==========================================================================
   Answerly — Color tokens
   Reference: ElevenLabs.io — cool, near-white + black, audio-native.
   UI chrome is PURE MONOCHROME (black + white). Color appears ONLY inside
   imagery (gradient audio orbs & waveforms). Surfaces keep a faint warmth.
   ========================================================================== */
:root {
  /* ---- Ink (near-pure black, faint warmth) ---- */
  --ink-950: #000000;
  --ink-900: #0d0d0d; /* primary text + primary buttons */
  --ink-800: #161616;
  --ink-700: #232323;
  --ink-600: #3d3d3b;
  --ink-500: #6b6b67; /* secondary text */
  --ink-400: #8f8d88; /* muted text on dark surfaces, icons, decoration; on light surfaces text is --text-muted (AA) */
  --ink-300: #b8b6af;
  --ink-200: #d9d7cf;

  /* ---- Paper / off-white surfaces (warm-neutral, close to white) ---- */
  --white:      #ffffff; /* raised cards */
  --paper-50:   #faf9f5; /* page background — warm off-white */
  --paper-100:  #f5f3ec; /* sunken band */
  --paper-200:  #ece9df; /* deeper band */
  --paper-300:  #e3dfd3;

  /* ---- Lines / borders (neutral, low contrast) ---- */
  --line:        #e6e3da;
  --line-strong: #d6d2c6;
  --line-faint:  #efece3;

  /* ---- Functional / status (used only for live-call / pass-fail) ---- */
  --green-500:  #1a7a43; /* ≥ 4.5:1 on green-100 and white (WCAG AA); was #1f8a4c */
  --green-100:  #e3f1e8;
  --red-500:    #b83426; /* ≥ 4.5:1 on red-100 and white (WCAG AA); was #c0392b */
  --red-100:    #f7e4e1;

  /* ---- Imagery gradient stops (the ONLY color in the system) ---------
     Iridescent ElevenLabs-style spectrum: orange → pink → violet → blue → mint.
     Use exclusively inside agent orbs, hero spheres, and waveform fills. */
  --spec-orange: #ff9d4d;
  --spec-pink:   #ff6fae;
  --spec-violet: #9b6cff;
  --spec-blue:   #4d8dff;
  --spec-mint:   #5fe3c0;

  /* =====================================================================
     Semantic aliases — prefer these in components
     ===================================================================== */
  --color-bg:             var(--paper-50);
  --color-surface:        var(--white);
  --color-surface-sunken: var(--paper-100);
  --color-surface-muted:  var(--paper-200);

  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-muted:     #6f6e6a; /* muted text on light surfaces: ≥ 4.5:1 on white, paper-50, paper-100 (WCAG AA) */
  --text-inverse:   var(--paper-50);

  --border-subtle:  var(--line);
  --border-strong:  var(--line-strong);
  --border-faint:   var(--line-faint);

  /* Buttons — monochrome only */
  --btn-primary-bg:    var(--ink-900);
  --btn-primary-fg:    var(--paper-50);
  --btn-primary-hover: #000000;
  --btn-secondary-bg:  var(--white);
  --btn-secondary-fg:  var(--ink-900);
  --btn-secondary-border: var(--line-strong);
  --btn-ghost-fg:      var(--ink-900);

  /* `accent` is monochrome ink in this system (no chromatic accent in UI) */
  --accent:        var(--ink-900);
  --accent-hover:  #000000;
  --accent-fg:     var(--paper-50);

  --focus-ring:    rgba(13, 13, 13, 0.30);

  /* ---- Signature imagery gradients ----
     Iridescent orb (radial) + spectrum sweep (linear, for waveforms/CTAs imagery) */
  --grad-orb:
    radial-gradient(120% 120% at 30% 24%,
      var(--spec-orange) 0%,
      var(--spec-pink) 28%,
      var(--spec-violet) 54%,
      var(--spec-blue) 78%,
      var(--spec-mint) 100%);
  --grad-spectrum:
    linear-gradient(90deg,
      var(--spec-orange) 0%,
      var(--spec-pink) 26%,
      var(--spec-violet) 52%,
      var(--spec-blue) 76%,
      var(--spec-mint) 100%);

  /* Faint warm section wash (very subtle — not the loud Bland glow) */
  --bg-soft-wash:
    radial-gradient(60% 60% at 80% 18%, rgba(155,108,255,0.06) 0%, transparent 60%),
    radial-gradient(55% 55% at 12% 88%, rgba(77,141,255,0.05) 0%, transparent 62%);
}