/* ── Theme tokens ─────────────────────────────────────────────────────────
     `:root` holds the DARK theme. [data-theme="cream"] / [data-theme="light"]
     override the same token set lower in this file. New code should consume
     the semantic tokens (--bg-page, --text-primary, --success, --disp-*,
     etc.). The 6 legacy palette aliases (--green/--amber/--red/--purple/
     --teal/--pink) are kept and re-route to their semantic counterpart so
     `var(--green,#22c55e)` fallback patterns scattered through the JS keep
     working and auto-track the active theme. */
  :root {
    /* Surface layers */
    --bg-page:     #0a0e1a;
    --bg-surface:  #111827;
    --bg-raised:   #1a2333;
    --bg-overlay:  rgba(0,0,0,0.7);

    /* Text */
    /* `--text-muted` was #64748b (slate-500): 3.73:1 on slate-900 — fails
       WCAG AA's 4.5:1 floor. Lifted to #94a3b8 (slate-400), ~6.3:1 on
       slate-900 / ~4.6:1 on slate-800. */
    --text-primary:  #f1f5f9;
    --text-muted:    #94a3b8;
    --text-label:    #cbd5e1;
    --text-inverted: #ffffff;

    /* Borders */
    --border:        #1f2937;
    --border-strong: #334155;
    --border-subtle: rgba(255,255,255,0.06);

    /* Accent — `--accent` stays for accent-colored *text*. The primary-button
       surface gets indigo-600 (--accent-bg) so white text reads ~7.8:1. */
    --accent:          #3b82f6;
    --accent-hover:    #60a5fa;
    --accent-bg:       #4f46e5;
    --accent-bg-hover: #4338ca;

    /* Status semantic tokens. `*-bg-tint` replaces inline
       rgba(R,G,B,0.10..0.18) patterns so tints retune per theme. */
    --success:          #10b981;
    --success-bg-tint:  rgba(16,185,129,0.15);
    --success-border:   rgba(16,185,129,0.35);
    --warning:          #f59e0b;
    --warning-bg-tint:  rgba(245,158,11,0.15);
    --warning-border:   rgba(245,158,11,0.35);
    --danger:           #ef4444;
    --danger-bg-tint:   rgba(239,68,68,0.15);
    --danger-border:    rgba(239,68,68,0.35);
    --info:             #3b82f6;
    --info-bg-tint:     rgba(59,130,246,0.15);
    --info-border:      rgba(59,130,246,0.35);
    --neutral:          #94a3b8;
    --neutral-bg-tint:  rgba(148,163,184,0.15);
    --neutral-border:   rgba(148,163,184,0.35);

    /* Chart palette */
    --chart-cost-stt:    #3b82f6;
    --chart-cost-llm:    #22c55e;
    --chart-cost-tts:    #fbbf24;
    --chart-grid:        rgba(255,255,255,0.06);
    --chart-axis-label:  #94a3b8;

    /* Disposition palette (Operations Insights bar segments). Keys mirror
       OPS_DISPOSITION_COLORS in js/core/ops-colors.js 1:1. */
    --disp-completed:           #22c55e;
    --disp-voicemail:           #a78bfa;
    --disp-ivr-hangup:          #ec4899;
    --disp-transferred:         #60a5fa;
    --disp-agent-hangup:        #14b8a6;
    --disp-agent-transferred:   #8b5cf6;
    --disp-max-duration:        #f97316;
    --disp-silence:             #fbbf24;
    --disp-unknown:             #6b7280;
    --disp-failed:              #ef4444;

    /* Legacy aliases — kept for `var(--green,#…)` fallback patterns in JS.
       Each routes to its semantic counterpart so they auto-track theme. */
    --bg:                var(--bg-page);
    --surface:           var(--bg-surface);
    --surface-elev:      var(--bg-raised);
    --card:              var(--bg-raised);
    --text:              var(--text-primary);
    --muted:             var(--text-muted);
    --label:             var(--text-label);
    --primary-bg:        var(--accent-bg);
    --primary-bg-hover:  var(--accent-bg-hover);
    --green:             var(--success);
    --amber:             var(--warning);
    --red:               var(--danger);
    --purple:            #8b5cf6;
    --teal:              #14b8a6;
    --pink:              #ec4899;

    --font: 'SF Mono','Fira Code',monospace;
    --sans: -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  }

  /* ── Cream theme — warm off-white ─────────────────────────────────────────
     Soft alternative to stark white. Dark warm-brown text on a cream page,
     deeper status hues for legibility against the lighter background. */
  [data-theme="cream"] {
    --bg-page:     #faf6ee;
    --bg-surface:  #fffaf0;
    --bg-raised:   #fff5e6;
    --bg-overlay:  rgba(58,47,31,0.45);

    --text-primary:  #3a2f1f;
    --text-muted:    #6b5d4a;
    --text-label:    #4a3d2a;
    --text-inverted: #fffaf0;

    --border:        #e8dcc4;
    --border-strong: #c9b88a;
    --border-subtle: rgba(58,47,31,0.06);

    --accent:          #1d4ed8;
    --accent-hover:    #1e40af;
    --accent-bg:       #4338ca;
    --accent-bg-hover: #3730a3;

    --success:          #15803d;
    --success-bg-tint:  rgba(21,128,61,0.12);
    --success-border:   rgba(21,128,61,0.30);
    --warning:          #b45309;
    --warning-bg-tint:  rgba(180,83,9,0.12);
    --warning-border:   rgba(180,83,9,0.30);
    --danger:           #b91c1c;
    --danger-bg-tint:   rgba(185,28,28,0.10);
    --danger-border:    rgba(185,28,28,0.30);
    --info:             #1d4ed8;
    --info-bg-tint:     rgba(29,78,216,0.10);
    --info-border:      rgba(29,78,216,0.30);
    --neutral:          #6b5d4a;
    --neutral-bg-tint:  rgba(107,93,74,0.10);
    --neutral-border:   rgba(107,93,74,0.30);

    --chart-cost-stt:    #1d4ed8;
    --chart-cost-llm:    #15803d;
    --chart-cost-tts:    #b45309;
    --chart-grid:        rgba(58,47,31,0.08);
    --chart-axis-label:  #6b5d4a;

    --disp-completed:           #15803d;
    --disp-voicemail:           #6d28d9;
    --disp-ivr-hangup:          #be185d;
    --disp-transferred:         #1d4ed8;
    --disp-agent-hangup:        #0f766e;
    --disp-agent-transferred:   #6d28d9;
    --disp-max-duration:        #c2410c;
    --disp-silence:             #b45309;
    --disp-unknown:             #6b5d4a;
    --disp-failed:              #b91c1c;
  }

  /* ── Light theme — bright neutral ─────────────────────────────────────────
     Stark-white surfaces, slate text. Saturated status hues kept distinct
     from cream's deeper tones; brighter than cream, darker than dark. */
  [data-theme="light"] {
    --bg-page:     #f9fafb;
    --bg-surface:  #ffffff;
    --bg-raised:   #ffffff;
    --bg-overlay:  rgba(15,23,42,0.45);

    --text-primary:  #0f172a;
    --text-muted:    #64748b;
    --text-label:    #334155;
    --text-inverted: #ffffff;

    --border:        #e2e8f0;
    --border-strong: #cbd5e1;
    --border-subtle: rgba(15,23,42,0.06);

    --accent:          #2563eb;
    --accent-hover:    #1d4ed8;
    --accent-bg:       #4f46e5;
    --accent-bg-hover: #4338ca;

    --success:          #16a34a;
    --success-bg-tint:  rgba(22,163,74,0.12);
    --success-border:   rgba(22,163,74,0.30);
    --warning:          #d97706;
    --warning-bg-tint:  rgba(217,119,6,0.12);
    --warning-border:   rgba(217,119,6,0.30);
    --danger:           #dc2626;
    --danger-bg-tint:   rgba(220,38,38,0.10);
    --danger-border:    rgba(220,38,38,0.30);
    --info:             #2563eb;
    --info-bg-tint:     rgba(37,99,235,0.10);
    --info-border:      rgba(37,99,235,0.30);
    --neutral:          #64748b;
    --neutral-bg-tint:  rgba(100,116,139,0.10);
    --neutral-border:   rgba(100,116,139,0.30);

    --chart-cost-stt:    #2563eb;
    --chart-cost-llm:    #16a34a;
    --chart-cost-tts:    #d97706;
    --chart-grid:        rgba(15,23,42,0.08);
    --chart-axis-label:  #64748b;

    --disp-completed:           #16a34a;
    --disp-voicemail:           #7c3aed;
    --disp-ivr-hangup:          #db2777;
    --disp-transferred:         #2563eb;
    --disp-agent-hangup:        #0d9488;
    --disp-agent-transferred:   #7c3aed;
    --disp-max-duration:        #ea580c;
    --disp-silence:             #d97706;
    --disp-unknown:             #64748b;
    --disp-failed:              #dc2626;
  }

  /* ── A11y primitives ──────────────────────────────────────────────────────
     `.sr-only` hides content visually but keeps it announced by AT.
     `.skip-link` is visually-hidden until focused, then snaps to the top. */
  .sr-only {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .skip-link {
    position:absolute; top:-40px; left:8px; background:var(--accent); color:var(--text-inverted);
    padding:8px 14px; border-radius:0 0 8px 8px; font-size:13px; font-weight:600;
    z-index:99999; text-decoration:none;
  }
  .skip-link:focus { top:0; outline:2px solid var(--text-inverted); outline-offset:2px; }
  *:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  /* Inline form error message under a single input (agent-validation.js).
     `role="alert"` is set on the element so AT announces it on insert. */
  .field-error-msg {
    display:block; margin-top:4px; font-size:12px; color:var(--danger);
    background:var(--danger-bg-tint); border-left:2px solid var(--danger);
    padding:4px 8px; border-radius:0 4px 4px 0;
  }
  input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
    border-color:var(--danger) !important; outline:none;
  }
  /* Distinct placeholder styling inside the kb-modal family — without it
     placeholder text was visually indistinguishable from real values and
     users mistook example text for a populated field. Italic + lower
     opacity is the convention used elsewhere in the dashboard. */
  .kb-modal input::placeholder,
  .kb-modal textarea::placeholder { font-style:italic; opacity:0.45; }
  .kb-modal input::-moz-placeholder,
  .kb-modal textarea::-moz-placeholder { font-style:italic; opacity:0.45; }
  .kb-modal input:-ms-input-placeholder,
  .kb-modal textarea:-ms-input-placeholder { font-style:italic; opacity:0.45; }
  /* Re-usable section sub-label inside the M-5 accordion. Higher contrast
     than the previous `color:var(--muted)` inline labels. */
  .aev-section-label {
    font-size:11px; font-weight:600; color:var(--label);
    text-transform:uppercase; letter-spacing:.06em;
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  body { background:var(--bg); color:var(--text); font-family:var(--sans); min-height:100vh; }