/*
 * Switchboard tokens — the single source of visual truth (Blueprint §11).
 * Redesign plan 2.1. Values ratified 2026-07-07 from the incumbent console
 * palette; every color is named by ROLE, never by hue. No color may exist
 * outside this file (Blueprint §11 color standard).
 *
 * Consumption:
 *  - Next apps: imported in _app.js; Tailwind classes map to these vars via
 *    voipagent-shared/tailwind.preset.js.
 *  - Tier-2 surfaces (operator dashboard, translate, landing): a static copy
 *    of this file is served alongside their CSS — see redesign tracker for
 *    the copy locations (copies are the deploy mechanism, same as favicons).
 */

:root {
  /* ── Surfaces — graphite neutral ramp, darkest = page ─────────────── */
  --surface-0: #0f1117;   /* app/page background */
  --surface-1: #161b27;   /* card / panel / table header */
  --surface-2: #1e2536;   /* raised control: inputs, secondary buttons, row hover */
  --surface-3: #232b3f;   /* highest hover / pressed */

  /* ── Hairlines — borders and dividers (the only border treatment) ─── */
  --hairline:      #252d40; /* default border/divider */
  --hairline-soft: #1e2536; /* subtle divider inside cards */

  /* ── Ink — text ramp on graphite ──────────────────────────────────── */
  --ink:       #f1f5f9; /* primary text, headings, values */
  --ink-soft:  #cbd5e1; /* secondary emphasis */
  --ink-muted: #94a3b8; /* labels, captions, secondary text */
  --ink-faint: #818fa4; /* placeholders, disabled, tertiary — AA-raised (P5 5.1: was #4b5563, 2.5:1 FAIL; now 5.75:1 on surface-0, 4.66:1 on surface-2, all AA) */

  /* ── Signal green — alive, healthy, primary action (Blueprint §11) ── */
  --signal:        #10b981; /* brand + primary action + healthy state */
  --signal-soft:   #34d399; /* text on signal-tint backgrounds */
  --signal-strong: #059669; /* primary action hover */
  --signal-tint:   rgba(16, 185, 129, 0.15); /* state chip/badge background */
  --signal-faint:  rgba(16, 185, 129, 0.08); /* whisper-level background wash */
  --signal-edge:   rgba(16, 185, 129, 0.30); /* border on tinted containers */
  --on-signal:     #07110d; /* text/icon on solid signal background */

  /* ── Warn amber — degraded, attention ─────────────────────────────── */
  --warn:        #f59e0b;
  --warn-soft:   #fbbf24;
  --warn-strong: #d97706;
  --warn-tint:   rgba(245, 158, 11, 0.15);
  --warn-faint:  rgba(245, 158, 11, 0.08);
  --warn-edge:   rgba(245, 158, 11, 0.30);
  --on-warn:     #241a04; /* text/icon on solid warn background (dark; ~10:1 on amber) */

  /* ── Danger red — failed, destructive ─────────────────────────────── */
  --danger:        #ef4444;
  --danger-soft:   #f87171;
  --danger-strong: #dc2626;
  --danger-tint:   rgba(239, 68, 68, 0.15);
  --danger-faint:  rgba(239, 68, 68, 0.08);
  --danger-edge:   rgba(239, 68, 68, 0.30);
  --on-danger:     #ffffff; /* text/icon on solid danger background (bold labels, AA-large) */

  /* ── Info blue — informational/neutral state ONLY (never action) ──── */
  --info:        #3b82f6;
  --info-soft:   #93c5fd; /* text on info-tint backgrounds (AA on dark tint) */
  --info-strong: #2563eb;
  --info-tint:   rgba(59, 130, 246, 0.15);
  --info-faint:  rgba(59, 130, 246, 0.08);
  --info-edge:   rgba(59, 130, 246, 0.30);
  --on-info:     #ffffff; /* text/icon on solid info background (bold labels, AA-large) */

  /* ── Scrim — modal backdrop (the only translucent overlay) ────────── */
  --scrim: rgba(15, 17, 23, 0.65);

  /* ── Focus ring — one keyboard-focus treatment (Blueprint §11 a11y, P5 5.2).
     Applied product-wide by each app's `:focus-visible` base rule and by the
     shared components (Tailwind `focus-visible:outline-2 outline-signal`).
     Never suppress a focus outline without this replacement. ──────────── */
  --focus-ring: 2px solid var(--signal);
  --focus-ring-offset: 2px;

  /* ── Type — two faces with fixed jobs (Blueprint §11 typography) ──── */
  /* Sans = interface language. Mono = system truth: every number,
     identifier, phone number, SIP name, timestamp, code. */
  --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ── Radii — exactly three (control, container, pill) ─────────────── */
  --radius-ctl:  10px;  /* inputs, buttons, small controls */
  --radius-ctr:  14px;  /* cards, panels, modals, table wraps */
  --radius-pill: 999px; /* badges, pills, dots */

  /* ── Elevation — two levels; cards are FLAT (hairline, not shadow) ── */
  --elevation-raised: 0 12px 28px rgba(0, 0, 0, 0.30); /* modals + menus only */

  /* ── Motion — sanctioned set only (Blueprint §11 / P12): micro-transitions,
     value-change flash, container open-close. One duration+easing per tier;
     all motion self-disables under prefers-reduced-motion (rules below). ── */
  --motion-micro: 120ms;              /* hover / color / nav micro-transitions */
  --motion-panel: 180ms;              /* dialog / menu / panel open-close */
  --motion-ease:  cubic-bezier(0.2, 0, 0, 1);
}

/* ── Sanctioned motion utilities (Blueprint §11 motion standard). Only three
   things move: a value that changed, a row that entered, a panel that opened.
   Ambient/looping animation is forbidden — the state-line live dot is the sole
   exception (it animates only while genuinely receiving data; lives in
   StateLine.js). Everything below no-ops under prefers-reduced-motion. ───── */

/* 1. Value-change flash — a live number just changed. */
@keyframes vc-flash {
  from { background-color: var(--signal-tint); }
  to   { background-color: transparent; }
}
.vc-flash { animation: vc-flash 900ms ease-out; border-radius: var(--radius-ctl); }

/* 2. Row entry — a row appeared in a live list (applied once, to new rows). */
@keyframes row-enter {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.row-enter { animation: row-enter var(--motion-panel) var(--motion-ease); }

/* 3. Panel open — dialog scrim fades in, panel rises. */
@keyframes panel-scrim { from { opacity: 0; } to { opacity: 1; } }
@keyframes panel-rise  { from { opacity: 0; transform: translateY(6px) scale(0.985); } to { opacity: 1; transform: none; } }
.panel-scrim { animation: panel-scrim var(--motion-panel) var(--motion-ease); }
.panel-rise  { animation: panel-rise  var(--motion-panel) var(--motion-ease); }

@media (prefers-reduced-motion: reduce) {
  .vc-flash, .row-enter, .panel-scrim, .panel-rise { animation: none; }
}