/* Sofer — Colors & Type
 * The single source of truth for foundational tokens.
 * Hex values live here; everything else uses semantic vars.
 *
 * The brand has two appearances: light (cream + iron-gall) and
 * dark (warm-dark + cream). Both use the same type scale and
 * motion vocabulary; only surface and ink tokens differ.
 */

:root {
  /* ───────────── INK (text) ───────────── */
  --ink-primary:   #1F1A14;  /* iron-gall: warm brown-black */
  --ink-secondary: #5A5247;  /* meta, timestamps, subtitles */
  --ink-tertiary:  #8E8678;  /* disabled, divider, low-emphasis */

  /* ───────────── SURFACE ───────────── */
  --surface-page:     #F8F4EB;  /* reading canvas — soft cream */
  --surface-app:      #FBF8F2;  /* app chrome — one shade closer to white */
  --surface-elevated: #FFFFFF;  /* sheets, popovers */
  --surface-sunken:   #EFE9DC;  /* search field, input wells */

  /* ───────────── ACCENT — VERMILION (RESERVED) ─────────────
   * Used ONLY for: recording state, low-confidence, destructive.
   * Never for warnings (those keep system yellow), never for CTAs.
   */
  --accent-vermilion:      #C73E2C;
  --accent-vermilion-soft: #F4DCD7;

  /* ───────────── SPEAKER PALETTE ─────────────
   * Mic family — ink-blue lightness ramp (slot 1 darkest → 6 softest).
   * System family — warm-umber lightness ramp.
   * Used on speaker labels, dots, optional 2pt leading bar at 30%.
   */
  --speaker-mic-1: #1A2747;
  --speaker-mic-2: #273556;
  --speaker-mic-3: #344365;
  --speaker-mic-4: #425275;
  --speaker-mic-5: #516185;
  --speaker-mic-6: #607095;

  --speaker-system-1: #7A4F1F;
  --speaker-system-2: #7F5424;
  --speaker-system-3: #845829;
  --speaker-system-4: #895D2E;
  --speaker-system-5: #8E6233;
  --speaker-system-6: #936738;

  /* ───────────── BORDERS ───────────── */
  --border-faint:    rgba(31, 26, 20, 0.08);
  --border-soft:     rgba(31, 26, 20, 0.14);
  --border-strong:   rgba(31, 26, 20, 0.22);

  /* ───────────── SHADOW ─────────────
   * Soft, low-spread, warm-tinted. No drop-shadows on inline UI.
   * Sheets/popovers only.
   */
  --shadow-sheet: 0 1px 2px rgba(31, 26, 20, 0.06),
                  0 12px 32px rgba(31, 26, 20, 0.14);
  --shadow-card:  0 1px 0 rgba(31, 26, 20, 0.04),
                  0 1px 3px rgba(31, 26, 20, 0.06);

  /* ───────────── TYPE FAMILIES ─────────────
   * New York: reading serif. macOS-system; Google fallback "Newsreader".
   * SF Pro:   UI sans. macOS-system; web fallback "Inter".
   * SF Mono:  tabular figures. macOS-system; web fallback "JetBrains Mono".
   */
  --font-serif: "New York", "Newsreader", "Charter", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans:  "SF Pro Text", "SF Pro", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "SF Pro Display", "SF Pro", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:  "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace;

  /* ───────────── TYPE SCALE — READING SURFACE ───────────── */
  --type-transcript-size:        16px;
  --type-transcript-leading:     1.55;
  --type-speaker-size:           13px;
  --type-speaker-weight:         600;
  --type-timestamp-size:         11px;
  --type-meeting-title-size:     22px;
  --type-meeting-title-weight:   500;
  --type-meeting-subtitle-size:  12px;

  /* ───────────── TYPE SCALE — UI ───────────── */
  --type-ui-size:        13px;
  --type-ui-meta-size:   11px;
  --type-ui-section:     11px; /* uppercase, tracked, semibold */
  --type-menu-headline:  17px;
  --type-menu-elapsed:   24px;

  /* ───────────── RADII ───────────── */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* ───────────── SPACING (4-step) ───────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;

  /* ───────────── MOTION ───────────── */
  --motion-quick:   200ms;
  --motion-default: 250ms;
  --motion-sheet:   300ms;
  --motion-settle:  700ms;  /* the held breath */
  --motion-easing:  cubic-bezier(0.2, 0.7, 0.2, 1); /* ease-out, weighted */

  /* ───────────── LAYOUT ───────────── */
  --transcript-column: 680px;
  --sidebar-width:     305px;
}

/* ───────────── DARK MODE ─────────────
 * Lamplight reading. Cream on warm-dark, never gray-on-black.
 * Vermilion brightens slightly to preserve perceived intensity.
 */
@media (prefers-color-scheme: dark) {
  :root {
    --ink-primary:   #E8E1D2;  /* cream */
    --ink-secondary: #A8A092;
    --ink-tertiary:  #6E665A;

    --surface-page:     #1A1612;
    --surface-app:      #211D17;
    --surface-elevated: #2A2520;
    --surface-sunken:   #15110D;

    --accent-vermilion:      #E55A47;
    --accent-vermilion-soft: #3D1F1A;

    --speaker-mic-1: #A8B5D9;
    --speaker-mic-2: #9DAACD;
    --speaker-mic-3: #929FC2;
    --speaker-mic-4: #8894B7;
    --speaker-mic-5: #7D89AB;
    --speaker-mic-6: #737FA0;

    --speaker-system-1: #D9A56F;
    --speaker-system-2: #CF9B66;
    --speaker-system-3: #C5925C;
    --speaker-system-4: #BB8853;
    --speaker-system-5: #B17F49;
    --speaker-system-6: #A77540;

    --border-faint:  rgba(232, 225, 210, 0.06);
    --border-soft:   rgba(232, 225, 210, 0.10);
    --border-strong: rgba(232, 225, 210, 0.18);

    --shadow-sheet: 0 1px 2px rgba(0, 0, 0, 0.4),
                    0 16px 40px rgba(0, 0, 0, 0.5);
    --shadow-card:  0 1px 0 rgba(0, 0, 0, 0.3),
                    0 2px 6px rgba(0, 0, 0, 0.35);
  }
}

/* ───────────── EXPLICIT THEME OVERRIDES ─────────────
 * Page-level [data-theme="light|dark"] overrides system preference.
 * Used in design-system previews so we can show both modes regardless
 * of the viewer's OS setting.
 */
[data-theme="light"] {
  --ink-primary:   #1F1A14;
  --ink-secondary: #5A5247;
  --ink-tertiary:  #8E8678;
  --surface-page:     #F8F4EB;
  --surface-app:      #FBF8F2;
  --surface-elevated: #FFFFFF;
  --surface-sunken:   #EFE9DC;
  --accent-vermilion: #C73E2C;
  --accent-vermilion-soft: #F4DCD7;
  --speaker-mic-1: #1A2747; --speaker-mic-2: #273556; --speaker-mic-3: #344365;
  --speaker-mic-4: #425275; --speaker-mic-5: #516185; --speaker-mic-6: #607095;
  --speaker-system-1: #7A4F1F; --speaker-system-2: #7F5424; --speaker-system-3: #845829;
  --speaker-system-4: #895D2E; --speaker-system-5: #8E6233; --speaker-system-6: #936738;
  --border-faint:  rgba(31, 26, 20, 0.08);
  --border-soft:   rgba(31, 26, 20, 0.14);
  --border-strong: rgba(31, 26, 20, 0.22);
  --shadow-sheet: 0 1px 2px rgba(31, 26, 20, 0.06), 0 12px 32px rgba(31, 26, 20, 0.14);
  --shadow-card:  0 1px 0 rgba(31, 26, 20, 0.04), 0 1px 3px rgba(31, 26, 20, 0.06);
}

[data-theme="dark"] {
  --ink-primary:   #E8E1D2;
  --ink-secondary: #A8A092;
  --ink-tertiary:  #6E665A;
  --surface-page:     #1A1612;
  --surface-app:      #211D17;
  --surface-elevated: #2A2520;
  --surface-sunken:   #15110D;
  --accent-vermilion: #E55A47;
  --accent-vermilion-soft: #3D1F1A;
  --speaker-mic-1: #A8B5D9; --speaker-mic-2: #9DAACD; --speaker-mic-3: #929FC2;
  --speaker-mic-4: #8894B7; --speaker-mic-5: #7D89AB; --speaker-mic-6: #737FA0;
  --speaker-system-1: #D9A56F; --speaker-system-2: #CF9B66; --speaker-system-3: #C5925C;
  --speaker-system-4: #BB8853; --speaker-system-5: #B17F49; --speaker-system-6: #A77540;
  --border-faint:  rgba(232, 225, 210, 0.06);
  --border-soft:   rgba(232, 225, 210, 0.10);
  --border-strong: rgba(232, 225, 210, 0.18);
  --shadow-sheet: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-card:  0 1px 0 rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* ───────────── SEMANTIC ELEMENT STYLES ───────────── */
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--type-ui-size);
  color: var(--ink-primary);
  background: var(--surface-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
}

/* Reading-room headings use the serif. UI headings use the sans. */
.serif, .reading {
  font-family: var(--font-serif);
  color: var(--ink-primary);
}

h1.serif, .h-display {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-primary);
  margin: 0;
}

h2.serif, .h-meeting-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--type-meeting-title-size);
  line-height: 1.3;
  color: var(--ink-primary);
  margin: 0;
}

h3, .h-ui {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink-primary);
  margin: 0;
}

.h-section {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--type-ui-section);
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}

p, .body-ui {
  font-family: var(--font-sans);
  font-size: var(--type-ui-size);
  line-height: 1.45;
  color: var(--ink-primary);
  margin: 0;
}

.body-reading {
  font-family: var(--font-serif);
  font-size: var(--type-transcript-size);
  line-height: var(--type-transcript-leading);
  color: var(--ink-primary);
}

.meta {
  font-family: var(--font-sans);
  font-size: var(--type-ui-meta-size);
  color: var(--ink-secondary);
  line-height: 1.4;
}

.timestamp, .mono, code {
  font-family: var(--font-mono);
  font-size: var(--type-timestamp-size);
  font-variant-numeric: tabular-nums;
  color: var(--ink-secondary);
}

.speaker-label {
  font-family: var(--font-serif);
  font-size: var(--type-speaker-size);
  font-weight: var(--type-speaker-weight);
  letter-spacing: 0.01em;
}

.wordmark {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: normal; /* roman, never italic */
  letter-spacing: -0.005em;
  color: var(--ink-primary);
}

/* Italic 'sofer' explainer — the only place italic serif appears */
.foreign-word {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-primary);
}