/* tokens.css - Design tokens for every theme.
 *
 * All colors in the app should come from these variables, never raw hex/rgba.
 * Light values live on :root; [data-theme="dark"] overrides the same names.
 * To add a theme, add another [data-theme="..."] block defining every token.
 */

:root {
  /* Constants (identical in every theme) */
  --color-white: #ffffff;
  --color-on-accent: #ffffff;              /* text on filled accent/status backgrounds */
  --color-on-accent-muted: rgba(255, 255, 255, 0.8);
  --color-on-accent-hover: rgba(255, 255, 255, 0.1);
  --color-on-warning: #000000;

  /* Fixed preview colors for the theme picker swatches (never switched) */
  --preview-light-bg: #eef1f6;
  --preview-light-bar: #14284b;
  --preview-light-side: #1b3360;
  --preview-light-surface: #ffffff;
  --preview-dark-bg: #141414;
  --preview-dark-bar: #1c1c1c;
  --preview-dark-side: #242424;
  --preview-dark-surface: #2e2e2e;

  /* Surfaces */
  --color-bg: #eef1f6;                     /* page background */
  --color-surface: #ffffff;                /* cards, navbar, panels, inputs */
  --color-surface-2: #f8f9fa;              /* headers, secondary panels */
  --color-surface-3: #e9ecef;              /* hover, pressed, subtle fills */
  --color-surface-4: #dee2e6;              /* hover on surface-3 */
  --color-overlay: rgba(255, 255, 255, 0.75);  /* loading overlays */
  --color-backdrop: rgba(0, 0, 0, 0.35);
  --color-hover-overlay: rgba(0, 0, 0, 0.03);
  --color-track: rgba(128, 128, 128, 0.12);
  --color-scrollbar-track: rgba(0, 0, 0, 0.04);
  --color-scrollbar: rgba(0, 0, 0, 0.25);
  --color-scrollbar-hover: rgba(0, 0, 0, 0.4);
  --color-code-bg: #1e1e1e;
  --color-code-text: #d4d4d4;

  /* Text */
  --color-text: #16181d;
  --color-text-secondary: #3d4350;
  --color-text-muted: #5b6270;
  --color-text-faint: #adb5bd;

  /* Borders */
  --color-border-subtle: #edf0f5;
  --color-border: #dce1ea;
  --color-border-strong: #cfd6e2;

  /* Brand (RockRecorder blue) */
  --color-brand: #1e4fb4;
  --color-brand-hover: #183f90;
  --color-brand-disabled: #a5b9e3;
  --color-brand-text: #1e4fb4;
  --color-brand-subtle: rgba(30, 79, 180, 0.08);
  --color-brand-muted: rgba(30, 79, 180, 0.16);
  --color-focus-ring: rgba(30, 79, 180, 0.25);
  --color-rock: #e8590c;
  --color-rock-text: #e8590c;

  /* Primary (Bootstrap blue) */
  --color-primary: #0d6efd;
  --color-primary-hover: #0a58ca;
  --color-primary-text: #0d6efd;
  --color-primary-emphasis: #084298;
  --color-primary-subtle: #e7f1ff;
  --color-primary-border: #b6d4fe;

  /* Neutral / secondary */
  --color-secondary: #6c757d;
  --color-secondary-subtle: #e2e3e5;
  --color-secondary-emphasis: #383d41;

  /* Status */
  --color-success: #198754;
  --color-success-hover: #157347;
  --color-success-text: #198754;
  --color-success-emphasis: #0f5132;
  --color-success-subtle: #d1e7dd;
  --color-success-muted: rgba(40, 167, 69, 0.2);
  --color-success-border: #badbcc;

  --color-danger: #dc3545;
  --color-danger-hover: #bb2d3b;
  --color-danger-text: #dc3545;
  --color-danger-emphasis: #842029;
  --color-danger-subtle: #f8d7da;
  --color-danger-border: #f5c2c7;

  --color-warning: #ffc107;
  --color-warning-text: #997404;
  --color-warning-subtle: #fff3cd;
  --color-warning-border: #ffe69c;

  --color-info: #0dcaf0;
  --color-info-accent: #0288d1;            /* channel tags, filter badges */
  --color-info-text: #0288d1;
  --color-info-emphasis: #01579b;
  --color-info-subtle: #e1f5fe;
  --color-info-border: #b3e5fc;

  /* Audio / charts */
  --color-waveform: #c8d5ef;              /* unplayed part of the wave */
  --color-waveform-alt: #0d6efd;
  --color-waveform-progress: #0a58ca;
  --color-waveform-cursor: #dc3545;

  /* Dropdown menus (navbar and everywhere else) */
  --color-menu-bg: #ffffff;
  --color-menu-hover: #eef1f6;

  /* Top navigation bar */
  --color-nav-bg: #14284b;
  --color-nav-border: #14284b;
  --color-nav-text: #c9d4e8;
  --color-nav-active: #ffffff;             /* active link text + underline */
  --color-nav-hover: rgba(255, 255, 255, 0.08);
  --color-nav-separator: rgba(255, 255, 255, 0.18);

  /* Recordings sidebar (tree, tabs, search, channel/date footer) */
  --color-side-bg: #1b3360;
  --color-side-border: #1b3360;
  --color-side-text: #e6ecf6;
  --color-side-muted: #a9b8d4;             /* inactive tab, date line */
  --color-side-hover: #244177;
  --color-side-active: #ffffff;            /* active tab text + underline */
  --color-side-selected: rgba(255, 255, 255, 0.14);
  --color-side-line: rgba(255, 255, 255, 0.12);  /* dividers, tree guides */
  --color-side-badge: rgba(255, 255, 255, 0.12);
  --color-side-scrollbar: rgba(255, 255, 255, 0.25);
  --color-side-scrollbar-hover: rgba(255, 255, 255, 0.4);
  --color-side-input-bg: rgba(255, 255, 255, 0.07);   /* search form fields */
  --color-side-input-border: rgba(255, 255, 255, 0.2);
  --color-side-input-focus: rgba(255, 255, 255, 0.55);
  --color-side-input-ring: rgba(255, 255, 255, 0.15);
  --color-side-check: #4f7fe0;             /* checked checkbox fill */
  --color-side-error: #ffa3ab;             /* readable red on the sidebar */

  /* Toolbar + player frame around the table */
  --color-frame-bg: #eef1f6;
  --color-segment-bg: #d8dfea;             /* speed pills track */

  /* Docked player - darker than the table so the two don't blend */
  --color-player-bg: #e1e7f0;
  --color-player-border: #b8c3d5;
  --color-player-track: #c3cddc;           /* volume slider track */

  /* Recordings table */
  --color-table-header-bg: #e4e9f1;
  --color-table-stripe: #f6f8fb;
  --color-table-row-line: #edf0f5;
  --color-row-playing: #dce6f8;
  --color-row-selected: #b9cdf3;           /* clearly stronger than playing */
  --color-row-selected-text: #0d2559;

  /* Shadows (colors; geometry stays with the component) */
  --color-shadow-weak: rgba(0, 0, 0, 0.05);
  --color-shadow: rgba(0, 0, 0, 0.1);
  --color-shadow-strong: rgba(0, 0, 0, 0.18);
}

/* Dark theme: neutral grays (no blue cast) */
[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #141414;
  --color-surface: #1c1c1c;
  --color-surface-2: #242424;
  --color-surface-3: #2e2e2e;
  --color-surface-4: #3a3a3a;
  --color-overlay: rgba(20, 20, 20, 0.8);
  --color-backdrop: rgba(0, 0, 0, 0.6);
  --color-hover-overlay: rgba(255, 255, 255, 0.04);
  --color-track: rgba(255, 255, 255, 0.08);
  --color-scrollbar-track: rgba(255, 255, 255, 0.03);
  --color-scrollbar: rgba(255, 255, 255, 0.2);
  --color-scrollbar-hover: rgba(255, 255, 255, 0.35);
  --color-code-bg: #0f0f0f;
  --color-code-text: #d4d4d4;

  --color-text: #e8e8e8;
  --color-text-secondary: #b4b4b4;
  --color-text-muted: #8f8f8f;
  --color-text-faint: #6e6e6e;

  --color-border-subtle: #2a2a2a;
  --color-border: #333333;
  --color-border-strong: #474747;

  --color-brand: #2c7be5;
  --color-brand-hover: #3d8bfd;
  --color-brand-disabled: #2a3f5c;
  --color-brand-text: #6ea8fe;
  --color-brand-subtle: rgba(110, 168, 254, 0.15);
  --color-brand-muted: rgba(110, 168, 254, 0.25);
  --color-focus-ring: rgba(110, 168, 254, 0.35);
  --color-rock: #e8590c;
  --color-rock-text: #f0803f;

  --color-primary: #0d6efd;
  --color-primary-hover: #3d8bfd;
  --color-primary-text: #6ea8fe;
  --color-primary-emphasis: #9ec5fe;
  --color-primary-subtle: #1b2430;
  --color-primary-border: #2c4260;

  --color-secondary: #4a4a4a;
  --color-secondary-subtle: #2e2e2e;
  --color-secondary-emphasis: #c4c4c4;

  --color-success: #198754;
  --color-success-hover: #1aa05e;
  --color-success-text: #75b798;
  --color-success-emphasis: #a3cfbb;
  --color-success-subtle: #1a2a21;
  --color-success-muted: rgba(117, 183, 152, 0.2);
  --color-success-border: #2d4a38;

  --color-danger: #dc3545;
  --color-danger-hover: #e04b59;
  --color-danger-text: #ea868f;
  --color-danger-emphasis: #f09098;
  --color-danger-subtle: #2c1e20;
  --color-danger-border: #4a2f33;

  --color-warning: #ffb700;
  --color-warning-text: #ffda6a;
  --color-warning-subtle: #2e281d;
  --color-warning-border: #4d4028;

  --color-info: #0dcaf0;
  --color-info-accent: #3dd5f3;
  --color-info-text: #6edff6;
  --color-info-emphasis: #9eeaf9;
  --color-info-subtle: #182a2e;
  --color-info-border: #1f4a55;

  --color-waveform: #c9956a;
  --color-waveform-alt: #6ea8fe;
  --color-waveform-progress: #3d8bfd;
  --color-waveform-cursor: #ea868f;

  --color-menu-bg: #242424;
  --color-menu-hover: #2e2e2e;

  --color-nav-bg: #1c1c1c;
  --color-nav-border: #333333;
  --color-nav-text: #e8e8e8;
  --color-nav-active: #6ea8fe;
  --color-nav-hover: #2e2e2e;
  --color-nav-separator: #333333;

  --color-side-bg: #1c1c1c;
  --color-side-border: #333333;
  --color-side-text: #e8e8e8;
  --color-side-muted: #8f8f8f;
  --color-side-hover: #242424;
  --color-side-active: #6ea8fe;
  --color-side-selected: rgba(110, 168, 254, 0.25);
  --color-side-line: #333333;
  --color-side-badge: #242424;
  --color-side-scrollbar: rgba(255, 255, 255, 0.2);
  --color-side-scrollbar-hover: rgba(255, 255, 255, 0.35);
  --color-side-input-bg: #242424;
  --color-side-input-border: #333333;
  --color-side-input-focus: #6ea8fe;
  --color-side-input-ring: rgba(110, 168, 254, 0.25);
  --color-side-check: #0d6efd;
  --color-side-error: #ea868f;

  --color-frame-bg: #1c1c1c;
  --color-segment-bg: #2e2e2e;

  --color-player-bg: #161616;
  --color-player-border: #474747;
  --color-player-track: #474747;

  --color-table-header-bg: #242424;
  --color-table-stripe: #1f1f1f;
  --color-table-row-line: #2a2a2a;
  --color-row-playing: rgba(110, 168, 254, 0.2);
  --color-row-selected: #24497f;
  --color-row-selected-text: #ffffff;

  --color-shadow-weak: rgba(0, 0, 0, 0.25);
  --color-shadow: rgba(0, 0, 0, 0.35);
  --color-shadow-strong: rgba(0, 0, 0, 0.5);
}