/* ═══════════════════════════════════════════════════════════════
   Variables CSS — Thèmes sombre (défaut) et clair
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Arrière-plans */
  --bg0: #0e0e10;
  --bg1: #1c1c22;
  --bg2: #26262e;
  --bg3: #35353f;
  --bg4: #46464f;

  /* Textes */
  --tx: #dcdce0;
  --tx2: #9a9aa4;
  --tx3: #686870;

  /* Accents */
  --acc: #6ea8cc;
  --acc2: rgba(110, 168, 204, .12);
  --acc3: rgba(110, 168, 204, .28);

  /* Couleurs sémantiques */
  --grn: #30d158;
  --red: #ff453a;
  --org: #ff9f0a;
  --blue: #5ac8fa;
  --play-grn: #30d158;
  --pause-org: #ff9f0a;
  --display-color: var(--play-grn);

  /* Bordures et ombres */
  --bdr: #3a3a44;
  --shadow: 0 1px 3px rgba(0, 0, 0, .4);
  --glow: 0 0 8px rgba(48, 209, 88, .15);

  /* Barre d'outils */
  --toolbar-bg1: #3c3c48;
  --toolbar-bg2: #323240;
  --tb-sep: rgba(255, 255, 255, .2);

  /* En-têtes de panneaux */
  --plhead-bg1: #2a2a32;
  --plhead-bg2: #24242c;

  /* Ligne de temps */
  --tl-bg1: #20202a;
  --tl-bg2: #26262e;
  --tl-tick: #6a6a78;
  --tl-text: #a0a0b0;

  /* Forme d'onde */
  --wf-bg1: #12121a;
  --wf-bg2: #0e0e14;
  --wf-canvas-bg: #141418;
  --wf-top: rgba(100,180,230,.95);
  --wf-mid: rgba(100,180,230,.7);
  --wf-center: rgba(100,180,230,.25);
  --wf-line: rgba(100,180,230,.3);

  /* Barre de statut */
  --status-bg1: #1c1c22;
  --status-bg2: #18181e;

  /* Icônes et curseurs */
  --icon-filter: grayscale(1) brightness(10);
  --slider-fill: #ccc;
  --slider-thumb: #999;
  --tbtn-color: #ccc;
  --tbtn-hover-bg: rgba(255, 255, 255, .1);
  --tbtn-hover-color: #fff;
}

/* ═══ Thème clair ═══ */
[data-theme="light"] {
  --bg0: #f5f5f7;
  --bg1: #ebebee;
  --bg2: #e0e0e4;
  --bg3: #b8b8c0;
  --bg4: #a0a0aa;

  --tx: #1d1d1f;
  --tx2: #48484d;
  --tx3: #6e6e73;

  --acc: #0071e3;
  --acc2: rgba(0, 113, 227, .1);
  --acc3: rgba(0, 113, 227, .22);

  --grn: #248a3d;
  --red: #d70015;
  --org: #c93400;
  --blue: #0071e3;
  --play-grn: #30d158;
  --pause-org: #ff9f0a;
  --display-color: #fff;

  --bdr: #a0a0a6;
  --shadow: 0 1px 3px rgba(0, 0, 0, .1);
  --glow: 0 0 8px rgba(36, 138, 61, .12);

  --toolbar-bg1: #c0c0c8;
  --toolbar-bg2: #b6b6be;
  --tb-sep: rgba(0, 0, 0, .25);

  --plhead-bg1: #e0e0e4;
  --plhead-bg2: #d8d8dc;

  --tl-bg1: #e4e4e8;
  --tl-bg2: #dddde1;
  --tl-tick: #aaa;
  --tl-text: #666;

  --wf-bg1: #e8e8ec;
  --wf-bg2: #f0f0f4;
  --wf-canvas-bg: #eaeaee;
  --wf-top: rgba(20,90,150,.9);
  --wf-mid: rgba(20,90,150,.65);
  --wf-center: rgba(20,90,150,.2);
  --wf-line: rgba(20,90,150,.25);

  --status-bg1: #c0c0c8;
  --status-bg2: #b6b6be;

  --icon-filter: grayscale(1) brightness(0.4);
  --slider-fill: #555;
  --slider-thumb: #555;
  --tbtn-color: #444;
  --tbtn-hover-bg: rgba(0, 0, 0, .1);
  --tbtn-hover-color: #111;
}