:root {
  /* Base colors */
  --bg: #0d0d0f;             /* page canvas */
  --surface: #141417;        /* panels, cards, modals */
  --surface2: #1c1c21;       /* panel sub-headers, secondary areas */
  --border: #2a2a32;         /* dividers, input outlines */
  --accent: #e8ff47;         /* primary brand color — neon yellow-green */
  --accent2: #47c8ff;        /* secondary brand color — cyan */
  --text: #e8e8ee;           /* primary text */
  --muted: #6b6b7a;          /* secondary/placeholder text, icons */
  --waveform: #3a3a48;       /* unplayed waveform bars */
  --waveform-progress: #e8ff47; /* played waveform bars */

  /* Extremes */
  --extreme: #ffffff;        /* absolute light endpoint (white in dark mode) */
  --extreme-inv: #000000;    /* absolute dark endpoint (black in dark mode) */

  /* Status base colors */
  --danger: #ff7777;         /* errors, destructive actions */
  --danger-muted: #ff9999;   /* softer danger for text / disconnect state */
  --success: #47ff8a;        /* confirmations, connected state */
  --rec: #ff4444;            /* recording-active indicator */

  /* Interaction overlays */
  --waveform-hover: oklch(from var(--extreme) l c h / 0.85);  /* waveform cursor line */
  --hover-overlay:  oklch(from var(--extreme) l c h / 0.06);  /* generic hover tint over any bg */

  /* Accent alpha variants */
  --accent-faint:  oklch(from var(--accent) l c h / 0.06);  /* very faint tinted background */
  --accent-subtle: oklch(from var(--accent) l c h / 0.12);  /* active segment background */
  --accent-hover:  oklch(from var(--accent) l c h / 0.2);   /* hover / active+hover background */
  --accent-mark:   oklch(from var(--accent) l c h / 0.28);  /* search match highlight */
  --accent-border: oklch(from var(--accent) l c h / 0.35);  /* standard accent border */
  --accent-select: oklch(from var(--accent) l c h / 0.5);   /* selection outline */
  --accent-glow:   oklch(from var(--accent) l c h / 0.8);   /* editing / active-border outline */
  --accent-strong: oklch(from var(--accent) l c h / 0.9);   /* playhead / split preview line */

  /* Accent2 alpha variants */
  --accent2-faint:  oklch(from var(--accent2) l c h / 0.1);   /* very faint tinted background */
  --accent2-subtle: oklch(from var(--accent2) l c h / 0.15);  /* subtle tinted background */
  --accent2-hover:  oklch(from var(--accent2) l c h / 0.18);  /* ctrl-hover word background */
  --accent2-border: oklch(from var(--accent2) l c h / 0.25);  /* standard accent2 border */
  --accent2-active: oklch(from var(--accent2) l c h / 0.35);  /* active / focused border */
  --accent2-select: oklch(from var(--accent2) l c h / 0.55);  /* selection / ctrl-hover outline */
  --accent2-glow:   oklch(from var(--accent2) l c h / 0.6);   /* strong hover border */

  /* Danger alpha variants */
  --danger-subtle:       oklch(from var(--danger) l c h / 0.08); /* very faint hover background */
  --danger-faint:        oklch(from var(--danger) l c h / 0.1);  /* faint hover background */
  --danger-soft:         oklch(from var(--danger) l c h / 0.25); /* medium-opacity border */
  --danger-border:       oklch(from var(--danger) l c h / 0.4);  /* standard danger border */
  --danger-muted-border: oklch(from var(--danger-muted) l c h / 0.3); /* disconnect button border */

  /* Success alpha variants */
  --success-faint:  oklch(from var(--success) l c h / 0.08); /* faint success background */
  --success-border: oklch(from var(--success) l c h / 0.25); /* success border */

  /* Other alpha variants */
  --rec-subtle:   oklch(from var(--rec) l c h / 0.1);   /* recording-active hover background */
  --muted-border: oklch(from var(--muted) l c h / 0.3); /* neutral badge / button border */
  --border-soft:  oklch(from var(--border) l c h / 0.6); /* semi-transparent row separator */

  /* Overlays and shadows */
  --extreme-faint: oklch(from var(--extreme) l c h / 0.03);   /* barely-there hover highlight */
  --scrim:         oklch(from var(--extreme-inv) l c h / 0.6); /* modal backdrop */
  --shadow-sm:     oklch(from var(--extreme-inv) l c h / 0.35); /* small drop shadow */
  --shadow-ring:   oklch(from var(--extreme-inv) l c h / 0.4);  /* focus ring / outline shadow */
  --shadow-md:     oklch(from var(--extreme-inv) l c h / 0.5);  /* medium panel shadow */
  --shadow-lg:     oklch(from var(--extreme-inv) l c h / 0.7);  /* large modal shadow */
  --shadow-text:   oklch(from var(--extreme-inv) l c h / 0.8);  /* text legibility shadow */

  /* Component-specific — derived from theme colors so they auto-invert in light mode */
  --minimap-thumb-bg:     oklch(from var(--text) l c h / 0.22); /* minimap viewport indicator fill */
  --minimap-thumb-border: oklch(from var(--text) l c h / 0.55); /* minimap viewport indicator edge */
  --minimap-handle:       oklch(from var(--text) l c h / 0.7);  /* minimap resize handle bars */
  --spinner-track:        oklch(from var(--muted) l c h / 0.15); /* loading spinner track ring */

  /* Typography */
  --font-sans: 'IBM Plex Sans', sans-serif;  /* sans-serif UI and prose font */
  --font-mono: 'IBM Plex Mono', monospace;   /* monospace UI font */
}

/* Typography — font sizes */
:root {
  /* Micro / dense UI */
  --fs-badge:      0.48rem;   /* ultra-tiny badge text (e.g. folder item count) */
  --fs-tag:        0.5rem;    /* tiny labels: type tags, step numbers, shortcut key caps */
  --fs-label-xs:   0.55rem;   /* small category labels, chips, section separators */
  --fs-fine:       0.57rem;   /* fine-print notes (e.g. cost disclaimer) */
  --fs-meta:       0.58rem;   /* secondary metadata: dates, keyboard hints, sub-labels */
  --fs-secondary:  0.6rem;    /* standard secondary text: toolbar items, timestamps */
  --fs-hint:       0.62rem;   /* hint and helper text: speaker hints, login subtitles */
  --fs-detail:     0.63rem;   /* detail labels: format options, word-level text */

  /* Standard UI text */
  --fs-label:      0.65rem;   /* standard labels: buttons, field labels, panel sub-text */
  --fs-label-lg:   0.67rem;   /* slightly larger label variant */
  --fs-caption:    0.68rem;   /* caption body: dialog messages, search input */
  --fs-body:       0.7rem;    /* standard panel body: speaker names, project titles */
  --fs-body-lg:    0.72rem;   /* slightly larger body: timecode sub-text, table cells */

  /* Section headers and content */
  --fs-subhead:    0.75rem;   /* sub-section headers, format group titles, kbd hints */
  --fs-field:      0.78rem;   /* field-level text: timecode display, model name */
  --fs-heading-sm: 0.8rem;    /* small headings: context menu items, guide h4 */
  --fs-heading-xs: 0.8125rem; /* extra-small headings: landing page nav/sub-text */
  --fs-note:       0.85rem;   /* notes and minor headings: info widget, waveform sections */
  --fs-prose:      0.875rem;  /* primary reading text: transcript segments, doc prose */
  --fs-content:    0.9rem;    /* content body: guide prose, account sections */
  --fs-nav:        0.9375rem; /* navigation text (landing page) */

  /* Titles and display */
  --fs-title-sm:   1rem;      /* small titles: panel headers, dialog inputs */
  --fs-title-xs:   1.0625rem; /* extra-small titles: landing page hero sub-text */
  --fs-title:      1.05rem;   /* titles: guide document section headings */
  --fs-title-lg:   1.1rem;    /* large titles and header icons: panel icons, sidebar logo */
  --fs-heading:    1.2rem;    /* page-level headings: guide major sections */
  --fs-heading-lg: 1.25rem;   /* large page headings: FAQ question text */
  --fs-display-sm: 1.4rem;    /* small display: account/landing section headers */
  --fs-display:    1.5rem;    /* display-level: empty-state icons */
  --fs-icon:       2rem;      /* large decorative icons and empty-state art */
}

/* Light theme — only base color overrides needed; all variants re-derive automatically */
[data-theme="light"] {
  --bg: #f3f4f7;             /* page canvas: light cool-gray */
  --surface: #ffffff;        /* panels/cards: pure white (elevated above bg) */
  --surface2: #eeeef3;       /* panel sub-headers / secondary areas */
  --border: #dddde8;         /* light, subtle border */
  --accent: #525600;         /* dark olive — light-mode version of the neon yellow-green */
  --accent2: #006eb5;        /* accessible blue */
  --text: #0d0d1a;           /* near-black */
  --muted: #606280;          /* mid gray-purple */
  --waveform: #9a9ab8;       /*  */
  --waveform-progress: #c8df27;  /*  */

  --danger: #c41818;         /* dark red — accessible on white */
  --danger-muted: #e05555;   /* softer danger for text */
  --success: #1a7a42;        /* dark green — accessible on white */
  --rec: #d42020;            /* recording-active indicator */

  --extreme: #000000;        /* absolute light endpoint flips to black in light mode */
  --extreme-inv: #ffffff;    /* absolute dark endpoint flips to white in light mode */
  --scrim: oklch(0 0 0 / 0.5); /* scrim stays dark regardless of theme */
}