/* StartBookmarks v2.1 | © 2026 Tous droits réservés — Tanis · Stephan.R · France */
/* ===================================================
   THEMES — CSS custom properties
   =================================================== */

/* ---------- DARK (default) ---------- */
:root,
[data-theme="dark"] {
  --bg-base:          #0e1017;
  --bg-surface:       #171a24;
  --bg-surface-2:     #1e2230;
  --bg-hover:         #252a3a;
  --bg-active:        #2c3248;

  --border:           rgba(255,255,255,0.07);
  --border-hover:     rgba(255,255,255,0.16);

  --text-primary:     #e2e4ee;
  --text-secondary:   #7b819a;
  --text-muted:       #464d65;

  --accent:           #5b6af0;
  --accent-hover:     #6b7af8;
  --accent-dim:       rgba(91,106,240,0.15);
  --accent-text:      #8b9cf8;

  --header-bg:        rgba(14,16,23,0.94);
  --nav-bg:           rgba(23,26,36,0.96);

  --shadow:           0 4px 28px rgba(0,0,0,0.45);
  --shadow-sm:        0 2px 10px rgba(0,0,0,0.35);
  --shadow-lg:        0 12px 48px rgba(0,0,0,0.55);

  --input-bg:         rgba(255,255,255,0.05);
  --input-border:     rgba(255,255,255,0.1);
  --input-focus:      rgba(91,106,240,0.45);

  --scrollbar-thumb:  #2c3248;
  --scrollbar-track:  transparent;

  --danger:           #e05252;
  --danger-hover:     #f06464;
  --danger-dim:       rgba(224,82,82,0.12);
  --success:          #4caf7d;
  --warning:          #f0a030;

  --drag-ghost-bg:    rgba(91,106,240,0.25);

  /* ── Tailles réglables (overrides par applySettings) ── */
  --base-font-size:   14px;
  --bm-favicon-size:  18px;   /* taille de l'image favicon */
  --bm-icon-wrap:     44px;   /* taille du conteneur icône (grille) */
  --bm-grid-item-w:   76px;   /* largeur d'un item en mode grille */
  --bm-favicon-sm:    14px;   /* favicon en mode liste */
  --bm-icon-wrap-sm:  24px;   /* conteneur en mode liste */
}

/* ---------- LIGHT ---------- */
[data-theme="light"] {
  --bg-base:          #eef0f6;
  --bg-surface:       #ffffff;
  --bg-surface-2:     #f5f6fb;
  --bg-hover:         #edf0fc;
  --bg-active:        #e1e6f9;

  --border:           rgba(0,0,0,0.07);
  --border-hover:     rgba(0,0,0,0.16);

  --text-primary:     #1a1d2e;
  --text-secondary:   #5a6080;
  --text-muted:       #9ba0b8;

  --accent:           #5b6af0;
  --accent-hover:     #4a59e0;
  --accent-dim:       rgba(91,106,240,0.1);
  --accent-text:      #5b6af0;

  --header-bg:        rgba(255,255,255,0.94);
  --nav-bg:           rgba(245,246,251,0.96);

  --shadow:           0 4px 28px rgba(0,0,0,0.08);
  --shadow-sm:        0 2px 10px rgba(0,0,0,0.06);
  --shadow-lg:        0 12px 48px rgba(0,0,0,0.12);

  --input-bg:         rgba(0,0,0,0.04);
  --input-border:     rgba(0,0,0,0.1);
  --input-focus:      rgba(91,106,240,0.3);

  --scrollbar-thumb:  #d0d3e8;
  --scrollbar-track:  transparent;

  --danger:           #d94040;
  --danger-hover:     #e85050;
  --danger-dim:       rgba(217,64,64,0.1);
  --success:          #3a9d6b;
  --warning:          #d4891e;

  --drag-ghost-bg:    rgba(91,106,240,0.18);

  --base-font-size:   14px;
  --bm-favicon-size:  18px;
  --bm-icon-wrap:     44px;
  --bm-grid-item-w:   76px;
  --bm-favicon-sm:    14px;
  --bm-icon-wrap-sm:  24px;
}

/* ---------- CAFÉ (dark warm) ---------- */
[data-theme="cafe"] {
  --bg-base:          #1a1410;
  --bg-surface:       #241c16;
  --bg-surface-2:     #2e2418;
  --bg-hover:         #3a2d22;
  --bg-active:        #4a3828;

  --text-primary:     #e8ddd0;
  --text-secondary:   #9c8a78;
  --text-muted:       #5a4e42;

  --accent:           #c97d3a;
  --accent-hover:     #d98f4a;
  --accent-dim:       rgba(201,125,58,0.15);
  --accent-text:      #d9956a;

  --header-bg:        rgba(26,20,16,0.94);
  --nav-bg:           rgba(36,28,22,0.96);

  --shadow:           0 4px 28px rgba(0,0,0,0.50);
  --shadow-sm:        0 2px 10px rgba(0,0,0,0.40);
  --shadow-lg:        0 12px 48px rgba(0,0,0,0.60);

  --input-bg:         rgba(255,255,255,0.05);
  --input-border:     rgba(255,255,255,0.1);
  --input-focus:      rgba(201,125,58,0.40);

  --scrollbar-thumb:  #3a2d22;

  --drag-ghost-bg:    rgba(201,125,58,0.22);
}

/* ---------- NORD ---------- */
[data-theme="nord"] {
  --bg-base:          #2e3440;
  --bg-surface:       #3b4252;
  --bg-surface-2:     #434c5e;
  --bg-hover:         #4c566a;
  --bg-active:        #565f78;

  --border:           rgba(236,239,244,0.08);
  --border-hover:     rgba(236,239,244,0.18);

  --text-primary:     #eceff4;
  --text-secondary:   #8896af;
  --text-muted:       #4c566a;

  --accent:           #88c0d0;
  --accent-hover:     #8fbcbb;
  --accent-dim:       rgba(136,192,208,0.15);
  --accent-text:      #88c0d0;

  --header-bg:        rgba(46,52,64,0.94);
  --nav-bg:           rgba(59,66,82,0.96);

  --shadow:           0 4px 28px rgba(0,0,0,0.40);
  --shadow-sm:        0 2px 10px rgba(0,0,0,0.30);
  --shadow-lg:        0 12px 48px rgba(0,0,0,0.50);

  --input-bg:         rgba(255,255,255,0.05);
  --input-border:     rgba(236,239,244,0.12);
  --input-focus:      rgba(136,192,208,0.35);

  --scrollbar-thumb:  #434c5e;

  --danger:           #bf616a;
  --danger-hover:     #d07080;
  --danger-dim:       rgba(191,97,106,0.15);
  --success:          #a3be8c;
  --warning:          #ebcb8b;

  --drag-ghost-bg:    rgba(136,192,208,0.20);
}

/* ---------- MIDNIGHT (deep indigo) ---------- */
[data-theme="midnight"] {
  --bg-base:          #080b18;
  --bg-surface:       #0d1226;
  --bg-surface-2:     #131830;
  --bg-hover:         #1c2444;
  --bg-active:        #252d55;

  --text-primary:     #d4daf5;
  --text-secondary:   #6070a0;
  --text-muted:       #3a4268;

  --accent:           #7c6af5;
  --accent-hover:     #9080ff;
  --accent-dim:       rgba(124,106,245,0.15);
  --accent-text:      #a090ff;

  --header-bg:        rgba(8,11,24,0.94);
  --nav-bg:           rgba(13,18,38,0.96);

  --shadow:           0 4px 28px rgba(0,0,0,0.55);
  --shadow-sm:        0 2px 10px rgba(0,0,0,0.45);
  --shadow-lg:        0 12px 48px rgba(0,0,0,0.65);

  --input-bg:         rgba(255,255,255,0.04);
  --input-border:     rgba(255,255,255,0.08);
  --input-focus:      rgba(124,106,245,0.40);

  --scrollbar-thumb:  #1c2444;

  --drag-ghost-bg:    rgba(124,106,245,0.22);
}

/* ---------- OCEAN ---------- */
[data-theme="ocean"] {
  --bg-base:          #071419;
  --bg-surface:       #0c1e26;
  --bg-surface-2:     #122530;
  --bg-hover:         #183040;
  --bg-active:        #1e3c50;

  --text-primary:     #c8e8f0;
  --text-secondary:   #5a8898;
  --text-muted:       #2d5060;

  --accent:           #2ab8c8;
  --accent-hover:     #38cad8;
  --accent-dim:       rgba(42,184,200,0.15);
  --accent-text:      #50d0de;

  --header-bg:        rgba(7,20,25,0.94);
  --nav-bg:           rgba(12,30,38,0.96);

  --shadow:           0 4px 28px rgba(0,0,0,0.55);
  --shadow-sm:        0 2px 10px rgba(0,0,0,0.45);
  --shadow-lg:        0 12px 48px rgba(0,0,0,0.65);

  --input-bg:         rgba(255,255,255,0.04);
  --input-border:     rgba(255,255,255,0.08);
  --input-focus:      rgba(42,184,200,0.40);

  --scrollbar-thumb:  #183040;

  --drag-ghost-bg:    rgba(42,184,200,0.20);
}

/* ---------- TOKYO NIGHT ---------- */
[data-theme="tokyo-night"] {
  --bg-base:          #1a1b2e;
  --bg-surface:       #24253f;
  --bg-surface-2:     #2a2c4a;
  --bg-hover:         #313452;
  --bg-active:        #3d4060;

  --border:           rgba(192,202,245,0.06);
  --border-hover:     rgba(192,202,245,0.14);

  --text-primary:     #c0caf5;
  --text-secondary:   #7080c0;
  --text-muted:       #3d4580;

  --accent:           #7aa2f7;
  --accent-hover:     #89b3f8;
  --accent-dim:       rgba(122,162,247,0.15);
  --accent-text:      #9ab5f9;

  --header-bg:        rgba(26,27,46,0.94);
  --nav-bg:           rgba(36,37,63,0.96);

  --shadow:           0 4px 28px rgba(0,0,0,0.50);
  --shadow-sm:        0 2px 10px rgba(0,0,0,0.40);
  --shadow-lg:        0 12px 48px rgba(0,0,0,0.60);

  --input-bg:         rgba(192,202,245,0.05);
  --input-border:     rgba(192,202,245,0.1);
  --input-focus:      rgba(122,162,247,0.35);

  --scrollbar-thumb:  #2a2c4a;

  --drag-ghost-bg:    rgba(122,162,247,0.22);
}

/* ---------- CATPPUCCIN MOCHA ---------- */
[data-theme="catppuccin"] {
  --bg-base:          #11111b;
  --bg-surface:       #1e1e2e;
  --bg-surface-2:     #313244;
  --bg-hover:         #45475a;
  --bg-active:        #585b70;

  --border:           rgba(205,214,244,0.08);
  --border-hover:     rgba(205,214,244,0.18);

  --text-primary:     #cdd6f4;
  --text-secondary:   #a6adc8;
  --text-muted:       #6c7086;

  --accent:           #cba6f7;
  --accent-hover:     #d4b6f9;
  --accent-dim:       rgba(203,166,247,0.15);
  --accent-text:      #cba6f7;

  --header-bg:        rgba(17,17,27,0.94);
  --nav-bg:           rgba(30,30,46,0.96);

  --shadow:           0 4px 28px rgba(0,0,0,0.50);
  --shadow-sm:        0 2px 10px rgba(0,0,0,0.40);
  --shadow-lg:        0 12px 48px rgba(0,0,0,0.60);

  --input-bg:         rgba(205,214,244,0.05);
  --input-border:     rgba(205,214,244,0.1);
  --input-focus:      rgba(203,166,247,0.35);

  --scrollbar-thumb:  #313244;

  --danger:           #f38ba8;
  --danger-hover:     #f59bba;
  --danger-dim:       rgba(243,139,168,0.15);
  --success:          #a6e3a1;
  --warning:          #f9e2af;

  --drag-ghost-bg:    rgba(203,166,247,0.20);
}

/* ---------- AMOLED (pure black / OLED) ---------- */
[data-theme="amoled"] {
  --bg-base:          #000000;
  --bg-surface:       #0a0a0a;
  --bg-surface-2:     #111111;
  --bg-hover:         #181818;
  --bg-active:        #222222;

  --border:           rgba(255,255,255,0.05);
  --border-hover:     rgba(255,255,255,0.12);

  --text-primary:     #ffffff;
  --text-secondary:   #888888;
  --text-muted:       #444444;

  --accent:           #00e5b0;
  --accent-hover:     #00f5c0;
  --accent-dim:       rgba(0,229,176,0.12);
  --accent-text:      #00e5b0;

  --header-bg:        rgba(0,0,0,0.97);
  --nav-bg:           rgba(10,10,10,0.98);

  --shadow:           0 4px 28px rgba(0,0,0,0.70);
  --shadow-sm:        0 2px 10px rgba(0,0,0,0.60);
  --shadow-lg:        0 12px 48px rgba(0,0,0,0.80);

  --input-bg:         rgba(255,255,255,0.04);
  --input-border:     rgba(255,255,255,0.08);
  --input-focus:      rgba(0,229,176,0.35);

  --scrollbar-thumb:  #222222;

  --drag-ghost-bg:    rgba(0,229,176,0.18);
}

/* ---------- NATURE (light green) ---------- */
[data-theme="nature"] {
  --bg-base:          #edf5ee;
  --bg-surface:       #ffffff;
  --bg-surface-2:     #f2f8f2;
  --bg-hover:         #e4f0e4;
  --bg-active:        #d4e8d4;

  --border:           rgba(0,0,0,0.07);
  --border-hover:     rgba(0,0,0,0.16);

  --text-primary:     #1a2e1c;
  --text-secondary:   #4a6a4c;
  --text-muted:       #8aaa8c;

  --accent:           #3a8a50;
  --accent-hover:     #2e7844;
  --accent-dim:       rgba(58,138,80,0.10);
  --accent-text:      #3a8a50;

  --header-bg:        rgba(237,245,238,0.94);
  --nav-bg:           rgba(242,248,242,0.96);

  --shadow:           0 4px 28px rgba(0,60,20,0.08);
  --shadow-sm:        0 2px 10px rgba(0,60,20,0.05);
  --shadow-lg:        0 12px 48px rgba(0,60,20,0.12);

  --input-bg:         rgba(0,0,0,0.04);
  --input-border:     rgba(0,0,0,0.10);
  --input-focus:      rgba(58,138,80,0.30);

  --scrollbar-thumb:  #b8d8b8;

  --danger:           #d94040;
  --danger-hover:     #e85050;
  --danger-dim:       rgba(217,64,64,0.10);
  --success:          #3a8a50;
  --warning:          #d4891e;

  --drag-ghost-bg:    rgba(58,138,80,0.18);
}

/* ---------- SOLARIZED LIGHT ---------- */
[data-theme="solarized"] {
  --bg-base:          #fdf6e3;
  --bg-surface:       #eee8d5;
  --bg-surface-2:     #e8e2cc;
  --bg-hover:         #dfd9c2;
  --bg-active:        #d5cfba;

  --border:           rgba(0,0,0,0.08);
  --border-hover:     rgba(0,0,0,0.18);

  --text-primary:     #073642;
  --text-secondary:   #586e75;
  --text-muted:       #93a1a1;

  --accent:           #268bd2;
  --accent-hover:     #1a7bc4;
  --accent-dim:       rgba(38,139,210,0.10);
  --accent-text:      #268bd2;

  --header-bg:        rgba(253,246,227,0.94);
  --nav-bg:           rgba(238,232,213,0.96);

  --shadow:           0 4px 28px rgba(0,0,0,0.08);
  --shadow-sm:        0 2px 10px rgba(0,0,0,0.05);
  --shadow-lg:        0 12px 48px rgba(0,0,0,0.12);

  --input-bg:         rgba(0,0,0,0.04);
  --input-border:     rgba(0,0,0,0.10);
  --input-focus:      rgba(38,139,210,0.30);

  --scrollbar-thumb:  #c8c0a8;

  --danger:           #dc322f;
  --danger-hover:     #ec4240;
  --danger-dim:       rgba(220,50,47,0.10);
  --success:          #859900;
  --warning:          #b58900;

  --drag-ghost-bg:    rgba(38,139,210,0.15);
}

/* ---------- ROSE ---------- */
[data-theme="rose"] {
  --bg-base:          #fef0f4;
  --bg-surface:       #ffffff;
  --bg-surface-2:     #fdf0f5;
  --bg-hover:         #fce4ec;
  --bg-active:        #f8d0e0;

  --border:           rgba(0,0,0,0.06);
  --border-hover:     rgba(0,0,0,0.14);

  --text-primary:     #2d1018;
  --text-secondary:   #8a4060;
  --text-muted:       #c090a8;

  --accent:           #e0527a;
  --accent-hover:     #d04468;
  --accent-dim:       rgba(224,82,122,0.10);
  --accent-text:      #e0527a;

  --header-bg:        rgba(254,240,244,0.94);
  --nav-bg:           rgba(253,240,245,0.96);

  --shadow:           0 4px 28px rgba(180,0,60,0.08);
  --shadow-sm:        0 2px 10px rgba(180,0,60,0.05);
  --shadow-lg:        0 12px 48px rgba(180,0,60,0.12);

  --input-bg:         rgba(0,0,0,0.04);
  --input-border:     rgba(0,0,0,0.08);
  --input-focus:      rgba(224,82,122,0.30);

  --scrollbar-thumb:  #f0c0d0;

  --danger:           #d94040;
  --danger-hover:     #e85050;
  --danger-dim:       rgba(217,64,64,0.10);
  --success:          #3a9d6b;
  --warning:          #d4891e;

  --drag-ghost-bg:    rgba(224,82,122,0.18);
}

/* ---------- GLASSMORPHISM ---------- */
[data-theme="glass"] {
  --bg-base:          #080c1a;
  --bg-surface:       rgba(255,255,255,0.06);
  --bg-surface-2:     rgba(255,255,255,0.10);
  --bg-hover:         rgba(255,255,255,0.12);
  --bg-active:        rgba(255,255,255,0.18);

  --border:           rgba(255,255,255,0.12);
  --border-hover:     rgba(255,255,255,0.28);

  --text-primary:     #e8ecff;
  --text-secondary:   #8a93c8;
  --text-muted:       #494e7a;

  --accent:           #6c8aff;
  --accent-hover:     #88a2ff;
  --accent-dim:       rgba(108,138,255,0.18);
  --accent-text:      #8ca4ff;

  --header-bg:        rgba(8,12,26,0.75);
  --nav-bg:           rgba(12,16,32,0.70);

  --shadow:           0 8px 32px rgba(0,0,0,0.55);
  --shadow-sm:        0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg:        0 16px 64px rgba(0,0,0,0.65);

  --input-bg:         rgba(255,255,255,0.08);
  --input-border:     rgba(255,255,255,0.15);
  --input-focus:      rgba(108,138,255,0.40);

  --scrollbar-thumb:  rgba(255,255,255,0.15);
  --scrollbar-track:  transparent;

  --danger:           #ff6b8a;
  --danger-hover:     #ff8099;
  --danger-dim:       rgba(255,107,138,0.15);
  --success:          #6bffb8;
  --warning:          #ffd06b;

  --drag-ghost-bg:    rgba(108,138,255,0.25);
  --glass-blur:       14px;

  --base-font-size:   14px;
  --bm-favicon-size:  18px;
  --bm-icon-wrap:     44px;
  --bm-grid-item-w:   76px;
  --bm-favicon-sm:    14px;
  --bm-icon-wrap-sm:  24px;
}

/* ---------- MINIMAL ---------- */
[data-theme="minimal"] {
  --bg-base:          #f8f8f8;
  --bg-surface:       #ffffff;
  --bg-surface-2:     #f2f2f2;
  --bg-hover:         #ebebeb;
  --bg-active:        #e0e0e0;

  --border:           rgba(0,0,0,0.07);
  --border-hover:     rgba(0,0,0,0.14);

  --text-primary:     #111111;
  --text-secondary:   #555555;
  --text-muted:       #aaaaaa;

  --accent:           #111111;
  --accent-hover:     #333333;
  --accent-dim:       rgba(0,0,0,0.07);
  --accent-text:      #111111;

  --header-bg:        rgba(255,255,255,0.96);
  --nav-bg:           rgba(248,248,248,0.97);

  --shadow:           0 1px 4px rgba(0,0,0,0.05);
  --shadow-sm:        0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg:        0 4px 16px rgba(0,0,0,0.07);

  --input-bg:         #f2f2f2;
  --input-border:     rgba(0,0,0,0.10);
  --input-focus:      rgba(0,0,0,0.18);

  --scrollbar-thumb:  #dddddd;
  --scrollbar-track:  transparent;

  --danger:           #cc2222;
  --danger-hover:     #dd3333;
  --danger-dim:       rgba(204,34,34,0.08);
  --success:          #227733;
  --warning:          #aa6600;

  --drag-ghost-bg:    rgba(0,0,0,0.08);

  --base-font-size:   14px;
  --bm-favicon-size:  18px;
  --bm-icon-wrap:     44px;
  --bm-grid-item-w:   76px;
  --bm-favicon-sm:    14px;
  --bm-icon-wrap-sm:  24px;
}

/* ---------- DEEP DARK ---------- */
[data-theme="deep-dark"] {
  --bg-base:          #050508;
  --bg-surface:       #0b0c14;
  --bg-surface-2:     #111220;
  --bg-hover:         #191a2e;
  --bg-active:        #21223a;

  --border:           rgba(255,255,255,0.05);
  --border-hover:     rgba(255,255,255,0.11);

  --text-primary:     #f0f2ff;
  --text-secondary:   #5f66a0;
  --text-muted:       #333658;

  --accent:           #ff6b6b;
  --accent-hover:     #ff8585;
  --accent-dim:       rgba(255,107,107,0.14);
  --accent-text:      #ff8a8a;

  --header-bg:        rgba(5,5,8,0.96);
  --nav-bg:           rgba(11,12,20,0.97);

  --shadow:           0 4px 32px rgba(0,0,0,0.75);
  --shadow-sm:        0 2px 12px rgba(0,0,0,0.60);
  --shadow-lg:        0 12px 48px rgba(0,0,0,0.85);

  --input-bg:         rgba(255,255,255,0.04);
  --input-border:     rgba(255,255,255,0.07);
  --input-focus:      rgba(255,107,107,0.35);

  --scrollbar-thumb:  #191a2e;
  --scrollbar-track:  transparent;

  --danger:           #ff5555;
  --danger-hover:     #ff7070;
  --danger-dim:       rgba(255,85,85,0.14);
  --success:          #55cc88;
  --warning:          #ffaa44;

  --drag-ghost-bg:    rgba(255,107,107,0.20);

  --base-font-size:   14px;
  --bm-favicon-size:  18px;
  --bm-icon-wrap:     44px;
  --bm-grid-item-w:   76px;
  --bm-favicon-sm:    14px;
  --bm-icon-wrap-sm:  24px;
}

/* ---------- PASTEL ---------- */
[data-theme="pastel"] {
  --bg-base:          #fef6f2;
  --bg-surface:       #ffffff;
  --bg-surface-2:     #fdf0ec;
  --bg-hover:         #fce6e0;
  --bg-active:        #f9d8d0;

  --border:           rgba(0,0,0,0.06);
  --border-hover:     rgba(0,0,0,0.12);

  --text-primary:     #3d1e18;
  --text-secondary:   #9e5858;
  --text-muted:       #d0a0a0;

  --accent:           #f472b6;
  --accent-hover:     #ec4899;
  --accent-dim:       rgba(244,114,182,0.14);
  --accent-text:      #db2777;

  --header-bg:        rgba(254,246,242,0.95);
  --nav-bg:           rgba(253,240,236,0.97);

  --shadow:           0 4px 20px rgba(200,60,80,0.08);
  --shadow-sm:        0 2px 8px rgba(200,60,80,0.05);
  --shadow-lg:        0 12px 40px rgba(200,60,80,0.11);

  --input-bg:         rgba(0,0,0,0.04);
  --input-border:     rgba(0,0,0,0.08);
  --input-focus:      rgba(244,114,182,0.28);

  --scrollbar-thumb:  #f5c0cc;
  --scrollbar-track:  transparent;

  --danger:           #e05050;
  --danger-hover:     #f06060;
  --danger-dim:       rgba(224,80,80,0.10);
  --success:          #6cc47a;
  --warning:          #f0a844;

  --drag-ghost-bg:    rgba(244,114,182,0.18);

  --base-font-size:   14px;
  --bm-favicon-size:  18px;
  --bm-icon-wrap:     44px;
  --bm-grid-item-w:   76px;
  --bm-favicon-sm:    14px;
  --bm-icon-wrap-sm:  24px;
}

/* ---------- LAVENDER ---------- */
[data-theme="lavender"] {
  --bg-base:          #f2f0f8;
  --bg-surface:       #ffffff;
  --bg-surface-2:     #f5f3fc;
  --bg-hover:         #ece8f8;
  --bg-active:        #ddd8f5;

  --border:           rgba(0,0,0,0.07);
  --border-hover:     rgba(0,0,0,0.16);

  --text-primary:     #1e1840;
  --text-secondary:   #5a5080;
  --text-muted:       #a098c8;

  --accent:           #7058d0;
  --accent-hover:     #6048c0;
  --accent-dim:       rgba(112,88,208,0.10);
  --accent-text:      #7058d0;

  --header-bg:        rgba(242,240,248,0.94);
  --nav-bg:           rgba(245,243,252,0.96);

  --shadow:           0 4px 28px rgba(60,0,120,0.08);
  --shadow-sm:        0 2px 10px rgba(60,0,120,0.05);
  --shadow-lg:        0 12px 48px rgba(60,0,120,0.12);

  --input-bg:         rgba(0,0,0,0.04);
  --input-border:     rgba(0,0,0,0.10);
  --input-focus:      rgba(112,88,208,0.30);

  --scrollbar-thumb:  #c8c0e8;

  --danger:           #d94040;
  --danger-hover:     #e85050;
  --danger-dim:       rgba(217,64,64,0.10);
  --success:          #3a9d6b;
  --warning:          #d4891e;

  --drag-ghost-bg:    rgba(112,88,208,0.18);
}

/* ---------- POP (thème STRUCTUREL — voir overrides dans main.css) ---------- */
/* Couleurs douces + accent vif ; la vraie différence est dans la FORME des
   blocs (cartes flottantes, coin asymétrique, titres en pastille, icônes rondes). */
[data-theme="pop"] {
  --bg-base:          #14121c;
  --bg-surface:       #1e1b2b;
  --bg-surface-2:     #272338;
  --bg-hover:         #2e2942;
  --bg-active:        #383152;

  --border:           rgba(255,255,255,0.06);
  --border-hover:     rgba(255,255,255,0.15);

  --text-primary:     #ece9f5;
  --text-secondary:   #9a93b5;
  --text-muted:       #5e5878;

  --accent:           #ff6cab;
  --accent-hover:     #ff85bb;
  --accent-dim:       rgba(255,108,171,0.16);
  --accent-text:      #ff9ac8;

  --bm-icon-radius:    50%;    /* défaut Pop : icônes rondes (surclassable par l'option) */
  --bm-icon-radius-sm: 50%;
  --bm-icon-img-size:  100%;   /* favicon qui remplit le cercle → vraiment rond */
  --bm-icon-img-fit:   cover;

  --header-bg:        rgba(20,18,28,0.92);
  --nav-bg:           rgba(30,27,43,0.96);

  --shadow:           0 8px 32px rgba(0,0,0,0.42);
  --shadow-sm:        0 3px 14px rgba(0,0,0,0.32);
  --shadow-lg:        0 16px 52px rgba(0,0,0,0.55);

  --input-bg:         rgba(255,255,255,0.05);
  --input-border:     rgba(255,255,255,0.10);
  --input-focus:      rgba(255,108,171,0.45);

  --scrollbar-thumb:  #383152;

  --danger:           #ff5d6c;
  --danger-hover:     #ff7480;
  --danger-dim:       rgba(255,93,108,0.14);
  --success:          #4fd4a0;
  --warning:          #ffc24d;

  --drag-ghost-bg:    rgba(255,108,171,0.25);
}

/* ---------- SPINE (thème STRUCTUREL — titre vertical latéral) ---------- */
/* Le titre passe sur le côté gauche (à la verticale), le contenu occupe la droite. */
[data-theme="spine"] {
  --bg-base:          #0e1517;
  --bg-surface:       #14201f;
  --bg-surface-2:     #1b2a29;
  --bg-hover:         #213433;
  --bg-active:        #2a4140;

  --border:           rgba(255,255,255,0.07);
  --border-hover:     rgba(255,255,255,0.16);

  --text-primary:     #e3efed;
  --text-secondary:   #84a09c;
  --text-muted:       #4a625f;

  --accent:           #2bb9a8;
  --accent-hover:     #3fccba;
  --accent-dim:       rgba(43,185,168,0.15);
  --accent-text:      #5fd6c6;

  --header-bg:        rgba(14,21,23,0.93);
  --nav-bg:           rgba(20,32,31,0.96);

  --shadow:           0 4px 28px rgba(0,0,0,0.45);
  --shadow-sm:        0 2px 10px rgba(0,0,0,0.35);
  --shadow-lg:        0 12px 48px rgba(0,0,0,0.55);

  --input-bg:         rgba(255,255,255,0.05);
  --input-border:     rgba(255,255,255,0.10);
  --input-focus:      rgba(43,185,168,0.45);

  --scrollbar-thumb:  #2a4140;

  --danger:           #e05252;
  --danger-hover:     #f06464;
  --danger-dim:       rgba(224,82,82,0.12);
  --success:          #4caf7d;
  --warning:          #f0a030;

  --drag-ghost-bg:    rgba(43,185,168,0.25);
}

/* ---------- BRUTALIST (thème STRUCTUREL — bordures franches, ombre nette) ---------- */
/* Coins droits, grosses bordures, ombre portée décalée. Look « affiche ». */
[data-theme="brutal"] {
  --bg-base:          #100f12;
  --bg-surface:       #16161a;
  --bg-surface-2:     #1f1f24;
  --bg-hover:         #26262c;
  --bg-active:        #2e2e36;

  --border:           rgba(245,244,238,0.18);
  --border-hover:     rgba(245,244,238,0.35);

  --text-primary:     #f5f4ee;
  --text-secondary:   #b5b4ad;
  --text-muted:       #6e6e68;

  --accent:           #ff5c3a;
  --accent-hover:     #ff744f;
  --accent-dim:       rgba(255,92,58,0.16);
  --accent-text:      #ff8d70;

  --bm-icon-radius:    0;      /* défaut Brutalist : icônes carrées (surclassable par l'option) */
  --bm-icon-radius-sm: 0;

  --header-bg:        rgba(16,15,18,0.94);
  --nav-bg:           rgba(22,22,26,0.97);

  --shadow:           0 4px 28px rgba(0,0,0,0.55);
  --shadow-sm:        0 2px 10px rgba(0,0,0,0.4);
  --shadow-lg:        0 12px 48px rgba(0,0,0,0.6);

  --input-bg:         rgba(255,255,255,0.05);
  --input-border:     rgba(245,244,238,0.25);
  --input-focus:      rgba(255,92,58,0.5);

  --scrollbar-thumb:  #2e2e36;

  --danger:           #ff453a;
  --danger-hover:     #ff5e54;
  --danger-dim:       rgba(255,69,58,0.14);
  --success:          #30d158;
  --warning:          #ffd60a;

  --drag-ghost-bg:    rgba(255,92,58,0.28);
}