/* ═══════════════════════════════════════════════════════════════════════════
   Enfoca Transcribe — shared design system tokens
   ───────────────────────────────────────────────────────────────────────────
   v3 §1B (editorial foundation) single source of truth. Imported by app.html
   AND checkout.html AND any future page so the visual language stays coherent
   across every surface. Do not re-declare :root palette in individual pages;
   extend by adding new tokens here so drift is structurally impossible.

   Language: editorial + warm-neutral + reserved primary accent. Typography
   pairs Noto Serif (display) with Inter (body). Inspired by the Just Talk
   (Enfoca® Solo Habla) native macOS brand system — muted olive on warm paper,
   generous whitespace, baseline-offset ® on wordmarks.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surface hierarchy (warm paper scale, slightly warmer in v2) ── */
  --paper: #ffffff;
  --paper-warm: #fbfaf7;
  --surface: #ffffff;
  --surface-dim: #f3f3ef;
  --surface-container: #ededea;
  --surface-container-high: #e4e4df;
  --surface-container-lowest: #ffffff;
  --surface-2: #f6f5f1;
  --surface-3: #ededea;
  --border: #e4e4df;
  --border-hover: #c8c8c0;
  --outline-variant: rgba(115, 120, 119, 0.18);

  /* ── Ink / on-surface (Just Talk olive-neutral scale, Phase 2) ────
     Mapped from EnfocaBrandView.swift:
       Color(red: 0.45, green: 0.47, blue: 0.45) → #737877  (quiet)
       Color(red: 0.35, green: 0.37, blue: 0.35) → #5a5d59  (medium)
       Color(red: 0.25, green: 0.27, blue: 0.25) → #404340  (ink) */
  --ink: #404340;
  --text: #404340;
  --text-muted: #5a5d59;
  --text-dim: #737877;
  --on-surface: #3a3d3a;
  --on-surface-variant: #5a5d59;
  --on-surface-muted: #737877;

  /* ── Primary accent (Enfoca brand blue) ─────────────────────────────
     Normalized 2026-04-22 to match the canonical brand mark
     (`brand/enfoca-transcribe-logo.svg`). #3849e4 is the colour used by
     the "Transcribe" wordmark — UI primary tracks the lockup so CTAs,
     selection tints and the logo all read as the same blue.
     Reserved for interactive affordances — never for decorative fills. */
  /* Redesign (2026-07-22): monochrome accent — structural UI reads charcoal, not
     the saturated blue. The blue lives only in the logo SVG lockup (--brand). */
  --brand: #3849e4;
  --primary: #2b2d2b;
  --primary-hover: #111311;
  --primary-strong: #111311;
  --primary-container: #ececeb;
  --primary-soft: rgba(30, 32, 34, 0.05);
  --primary-wash: rgba(30, 32, 34, 0.075);
  --primary-border: rgba(30, 32, 34, 0.14);
  --primary-glow: rgba(30, 32, 34, 0.10);
  --primary-ink: #111311;
  --on-primary: #ffffff;
  --accent: var(--primary);
  --accent-hover: var(--primary-hover);
  --accent-light: #5c6066;
  --accent-glow: var(--primary-soft);

  /* ── Status palette ──────────────────────────────────────────────── */
  --status-complete: #22c55e;
  --status-processing: #f59e0b;
  --status-failed: #ef4444;
  --status-queued: #9b9b90;
  --green: var(--status-complete);
  --green-bg: rgba(34, 197, 94, 0.08);
  --amber: var(--status-processing);
  --amber-bg: rgba(245, 158, 11, 0.08);
  --red: var(--status-failed);
  --red-bg: rgba(239, 68, 68, 0.08);
  --cyan: #06b6d4;
  --error: var(--status-failed);

  /* ── Typography pairing ─────────────────────────────────────────── */
  --font-display: 'Noto Serif', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;
  --font: var(--font-body);

  /* ── Spatial + radius ───────────────────────────────────────────── */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;

  /* ── Motion ──────────────────────────────────────────────────────── */
  --duration-short: 150ms;
  --duration-medium: 250ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Respect prefers-reduced-motion globally (v3 §1H) ───────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── .display — serif heading class (Phase 2) ────────────────────
   Applies the editorial display face (Noto Serif) at section-header
   weight + tight tracking. Use on H2/H3 inside the viewer modal,
   settings panel, and any future card/section headers that should
   read as "premium quiet" rather than UI label.
   ─────────────────────────────────────────────────────────────── */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.18;
  color: var(--on-surface);
}
.display-sm { font-size: 1.125rem; }
.display-md { font-size: 1.5rem; }
.display-lg { font-size: 2rem; }

/* ── Brand mark — use the SVG lockups, not text ───────────────────
   Text-based ENFOCA® wordmark retired 2026-04-22. Four canonical SVG
   lockups live in `brand/`:
     transcribe-logo-light.svg  — full lockup, olive + brand blue, LIGHT bg
     transcribe-logo-dark.svg   — full lockup, light gray + pale blue, DARK bg
     enfoca-logo-dark.svg       — ENFOCA® only, olive ink, LIGHT bg
     enfoca-logo-white.svg      — ENFOCA® only, light gray, DARK bg
   Pick the variant that matches the surface you're rendering on. Don't
   reconstruct the wordmark in HTML — sizing, spacing, and the ® baseline
   are part of the mark and break when redrawn with text + spans.

   Usage:
     <img src="/transcribe/brand/transcribe-logo-light.svg"
          alt="Enfoca® Transcribe"
          style="display:block;height:28px;width:auto;">
   ─────────────────────────────────────────────────────────────── */