/**
 * Palette definitions, shared by the account area and the public frontend.
 *
 * Thirteen palettes, each with a dark set and a light set, selected by the
 * data-theme and data-mode attributes the layouts put on the html element.
 *
 * These lived in dashboard.css, which meant only the account area could see
 * them, so a person who chose Teal got Teal on their files page and the
 * built in Mauve everywhere else. They are in their own file now because the
 * public pages cannot load dashboard.css without inheriting the whole
 * dashboard layout, and a second copy of the colours would be a second set
 * to keep in step. Both sides load this one file.
 *
 * Anything reading these variables must be loaded after this file.
 */

/* =============================================
   MAUVE THEME
   ============================================= */
:root, [data-theme="mauve"] {
    --sp-bg-primary: #1a1625;
    --sp-bg-secondary: #231e2e;
    --sp-bg-sidebar: #1a1625;
    --sp-bg-header: #3d2b4a;
    --sp-bg-toolbar: #231e2e;
    --sp-bg-card: #2a2438;
    --sp-bg-card-hover: #352e45;
    --sp-text-primary: #e0e0e0;
    --sp-text-secondary: #b0b0b0;
    --sp-text-muted: #808080;
    --sp-text-header: #ffffff;
    --sp-text-sidebar: #6b6b7b;
    --sp-text-sidebar-active: #ffffff;
    --sp-border-color: rgba(255, 255, 255, 0.08);
    --sp-border-sidebar: rgba(255, 255, 255, 0.05);
    --sp-accent-primary: #8b5a9e;
    --sp-accent-secondary: #c75b7a;
    --sp-accent-green: #5cb85c;
    --sp-accent-red: #d9534f;
    --sp-btn-upload-bg: #a67a8e;
    --sp-btn-search-bg: #4a3a5a;
    --sp-btn-accent-bg: #c75b7a;
    --sp-tooltip-bg: #c75b7a;
    --sp-tooltip-text: #ffffff;
    --sp-shadow-sidebar: 2px 0 15px rgba(0, 0, 0, 0.3);
    --sp-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.2);
}
[data-theme="mauve"][data-mode="light"] {
    --sp-bg-primary: #f5f3f7;
    --sp-bg-secondary: #ffffff;
    --sp-bg-sidebar: #faf8fc;
    --sp-bg-header: #3d2b4a;
    --sp-bg-toolbar: #ffffff;
    --sp-bg-card: #ede8f2;
    --sp-bg-card-hover: #e0d8e8;
    --sp-text-primary: #2a2035;
    --sp-text-secondary: #5a4a65;
    --sp-text-muted: #8a7a95;
    --sp-text-sidebar: #7a6a85;
    --sp-text-sidebar-active: #3d2b4a;
    --sp-border-color: rgba(61, 43, 74, 0.12);
    --sp-border-sidebar: rgba(61, 43, 74, 0.08);
    --sp-shadow-sidebar: 2px 0 10px rgba(0, 0, 0, 0.06);
    --sp-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* =============================================
   DUSTY THEME (Steel blue)
   ============================================= */
[data-theme="dusty"] {
    --sp-bg-primary: #151a22;
    --sp-bg-secondary: #1c232e;
    --sp-bg-sidebar: #151a22;
    --sp-bg-header: #2a3a4d;
    --sp-bg-toolbar: #1c232e;
    --sp-bg-card: #212936;
    --sp-bg-card-hover: #2a3442;
    --sp-text-primary: #d8dce4;
    --sp-text-secondary: #9ca8b8;
    --sp-text-muted: #6b7a8c;
    --sp-text-header: #ffffff;
    --sp-text-sidebar: #5a6a7c;
    --sp-text-sidebar-active: #ffffff;
    --sp-border-color: rgba(140, 170, 210, 0.12);
    --sp-border-sidebar: rgba(140, 170, 210, 0.08);
    --sp-accent-primary: #5a8fd4;
    --sp-accent-secondary: #6bb3c7;
    --sp-accent-green: #5cb85c;
    --sp-accent-red: #d9534f;
    --sp-btn-upload-bg: #5a8a9e;
    --sp-btn-search-bg: #2a3a4d;
    --sp-btn-accent-bg: #5a8fd4;
    --sp-tooltip-bg: #3a5068;
    --sp-tooltip-text: #ffffff;
    --sp-shadow-sidebar: 2px 0 15px rgba(0, 0, 0, 0.35);
    --sp-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25);
}
[data-theme="dusty"][data-mode="light"] {
    --sp-bg-primary: #f3f5f8;
    --sp-bg-secondary: #ffffff;
    --sp-bg-sidebar: #f8fafc;
    --sp-bg-header: #2a3a4d;
    --sp-bg-toolbar: #ffffff;
    --sp-bg-card: #e8ecf2;
    --sp-bg-card-hover: #dce2ea;
    --sp-text-primary: #1a2530;
    --sp-text-secondary: #4a5a6a;
    --sp-text-muted: #7a8a9a;
    --sp-text-sidebar: #5a6a7a;
    --sp-text-sidebar-active: #2a3a4d;
    --sp-border-color: rgba(42, 58, 77, 0.12);
    --sp-border-sidebar: rgba(42, 58, 77, 0.08);
    --sp-shadow-sidebar: 2px 0 10px rgba(0, 0, 0, 0.06);
    --sp-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* =============================================
   SAGE THEME (Muted green)
   ============================================= */
[data-theme="sage"] {
    --sp-bg-primary: #161a18;
    --sp-bg-secondary: #1e2422;
    --sp-bg-sidebar: #161a18;
    --sp-bg-header: #2a3d35;
    --sp-bg-toolbar: #1e2422;
    --sp-bg-card: #222a27;
    --sp-bg-card-hover: #2c3632;
    --sp-text-primary: #dce4e0;
    --sp-text-secondary: #a8b8b0;
    --sp-text-muted: #6b7c74;
    --sp-text-header: #ffffff;
    --sp-text-sidebar: #5a6c64;
    --sp-text-sidebar-active: #ffffff;
    --sp-border-color: rgba(140, 180, 160, 0.12);
    --sp-border-sidebar: rgba(140, 180, 160, 0.08);
    --sp-accent-primary: #6b9e7a;
    --sp-accent-secondary: #7ab88a;
    --sp-accent-green: #6b9e7a;
    --sp-accent-red: #c75b5b;
    --sp-btn-upload-bg: #5a8e6a;
    --sp-btn-search-bg: #2a3d35;
    --sp-btn-accent-bg: #6b9e7a;
    --sp-tooltip-bg: #3a5848;
    --sp-tooltip-text: #ffffff;
    --sp-shadow-sidebar: 2px 0 15px rgba(0, 0, 0, 0.35);
    --sp-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25);
}
[data-theme="sage"][data-mode="light"] {
    --sp-bg-primary: #f3f7f5;
    --sp-bg-secondary: #ffffff;
    --sp-bg-sidebar: #f8fcfa;
    --sp-bg-header: #2a3d35;
    --sp-bg-toolbar: #ffffff;
    --sp-bg-card: #e8f0ec;
    --sp-bg-card-hover: #dce6e0;
    --sp-text-primary: #1a251f;
    --sp-text-secondary: #4a5a52;
    --sp-text-muted: #7a8a82;
    --sp-text-sidebar: #5a6a62;
    --sp-text-sidebar-active: #2a3d35;
    --sp-border-color: rgba(42, 61, 53, 0.12);
    --sp-border-sidebar: rgba(42, 61, 53, 0.08);
    --sp-shadow-sidebar: 2px 0 10px rgba(0, 0, 0, 0.06);
    --sp-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* =============================================
   ROSE THEME (Dusty pink)
   ============================================= */
[data-theme="rose"] {
    --sp-bg-primary: #1a1618;
    --sp-bg-secondary: #241e22;
    --sp-bg-sidebar: #1a1618;
    --sp-bg-header: #4a3540;
    --sp-bg-toolbar: #241e22;
    --sp-bg-card: #2a2428;
    --sp-bg-card-hover: #352e32;
    --sp-text-primary: #e4dce0;
    --sp-text-secondary: #b8a8b0;
    --sp-text-muted: #7c6b74;
    --sp-text-header: #ffffff;
    --sp-text-sidebar: #6c5a64;
    --sp-text-sidebar-active: #ffffff;
    --sp-border-color: rgba(200, 160, 180, 0.12);
    --sp-border-sidebar: rgba(200, 160, 180, 0.08);
    --sp-accent-primary: #c78a9e;
    --sp-accent-secondary: #d4a0b0;
    --sp-accent-green: #7ab88a;
    --sp-accent-red: #c75b6b;
    --sp-btn-upload-bg: #a67a8a;
    --sp-btn-search-bg: #3a2a32;
    --sp-btn-accent-bg: #c78a9e;
    --sp-tooltip-bg: #8a5a6a;
    --sp-tooltip-text: #ffffff;
    --sp-shadow-sidebar: 2px 0 15px rgba(0, 0, 0, 0.35);
    --sp-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25);
}
[data-theme="rose"][data-mode="light"] {
    --sp-bg-primary: #f7f3f5;
    --sp-bg-secondary: #ffffff;
    --sp-bg-sidebar: #fcf8fa;
    --sp-bg-header: #4a3540;
    --sp-bg-toolbar: #ffffff;
    --sp-bg-card: #f0e8ec;
    --sp-bg-card-hover: #e6dce2;
    --sp-text-primary: #251a1f;
    --sp-text-secondary: #5a4a52;
    --sp-text-muted: #8a7a82;
    --sp-text-sidebar: #6a5a62;
    --sp-text-sidebar-active: #4a3540;
    --sp-border-color: rgba(74, 53, 64, 0.12);
    --sp-border-sidebar: rgba(74, 53, 64, 0.08);
    --sp-shadow-sidebar: 2px 0 10px rgba(0, 0, 0, 0.06);
    --sp-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* =============================================
   SLATE THEME (Cool blue-gray)
   ============================================= */
[data-theme="slate"] {
    --sp-bg-primary: #16181a;
    --sp-bg-secondary: #1e2124;
    --sp-bg-sidebar: #16181a;
    --sp-bg-header: #2d3640;
    --sp-bg-toolbar: #1e2124;
    --sp-bg-card: #22262a;
    --sp-bg-card-hover: #2c3236;
    --sp-text-primary: #dce0e4;
    --sp-text-secondary: #a8b0b8;
    --sp-text-muted: #6b747c;
    --sp-text-header: #ffffff;
    --sp-text-sidebar: #5a646c;
    --sp-text-sidebar-active: #ffffff;
    --sp-border-color: rgba(160, 180, 200, 0.12);
    --sp-border-sidebar: rgba(160, 180, 200, 0.08);
    --sp-accent-primary: #7a8ea0;
    --sp-accent-secondary: #8aa0b4;
    --sp-accent-green: #6b9e7a;
    --sp-accent-red: #c75b5b;
    --sp-btn-upload-bg: #5a7080;
    --sp-btn-search-bg: #2d3640;
    --sp-btn-accent-bg: #7a8ea0;
    --sp-tooltip-bg: #4a5a68;
    --sp-tooltip-text: #ffffff;
    --sp-shadow-sidebar: 2px 0 15px rgba(0, 0, 0, 0.35);
    --sp-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25);
}
[data-theme="slate"][data-mode="light"] {
    --sp-bg-primary: #f4f5f7;
    --sp-bg-secondary: #ffffff;
    --sp-bg-sidebar: #f9fafb;
    --sp-bg-header: #2d3640;
    --sp-bg-toolbar: #ffffff;
    --sp-bg-card: #e9ebee;
    --sp-bg-card-hover: #dde0e4;
    --sp-text-primary: #1a1e22;
    --sp-text-secondary: #4a525a;
    --sp-text-muted: #7a828a;
    --sp-text-sidebar: #5a626a;
    --sp-text-sidebar-active: #2d3640;
    --sp-border-color: rgba(45, 54, 64, 0.12);
    --sp-border-sidebar: rgba(45, 54, 64, 0.08);
    --sp-shadow-sidebar: 2px 0 10px rgba(0, 0, 0, 0.06);
    --sp-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* =============================================
   SAND THEME (Warm beige)
   ============================================= */
[data-theme="sand"] {
    --sp-bg-primary: #1a1816;
    --sp-bg-secondary: #24221e;
    --sp-bg-sidebar: #1a1816;
    --sp-bg-header: #4a4235;
    --sp-bg-toolbar: #24221e;
    --sp-bg-card: #2a2822;
    --sp-bg-card-hover: #35322c;
    --sp-text-primary: #e4e0dc;
    --sp-text-secondary: #b8b0a8;
    --sp-text-muted: #7c746b;
    --sp-text-header: #ffffff;
    --sp-text-sidebar: #6c645a;
    --sp-text-sidebar-active: #ffffff;
    --sp-border-color: rgba(200, 180, 150, 0.12);
    --sp-border-sidebar: rgba(200, 180, 150, 0.08);
    --sp-accent-primary: #c7a87a;
    --sp-accent-secondary: #d4b88a;
    --sp-accent-green: #8ab87a;
    --sp-accent-red: #c7705b;
    --sp-btn-upload-bg: #9e8a6a;
    --sp-btn-search-bg: #3a3428;
    --sp-btn-accent-bg: #c7a87a;
    --sp-tooltip-bg: #6a5a48;
    --sp-tooltip-text: #ffffff;
    --sp-shadow-sidebar: 2px 0 15px rgba(0, 0, 0, 0.35);
    --sp-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25);
}
[data-theme="sand"][data-mode="light"] {
    --sp-bg-primary: #f7f5f3;
    --sp-bg-secondary: #ffffff;
    --sp-bg-sidebar: #fcfaf8;
    --sp-bg-header: #4a4235;
    --sp-bg-toolbar: #ffffff;
    --sp-bg-card: #f0ece8;
    --sp-bg-card-hover: #e6e0da;
    --sp-text-primary: #251f1a;
    --sp-text-secondary: #5a524a;
    --sp-text-muted: #8a827a;
    --sp-text-sidebar: #6a625a;
    --sp-text-sidebar-active: #4a4235;
    --sp-border-color: rgba(74, 66, 53, 0.12);
    --sp-border-sidebar: rgba(74, 66, 53, 0.08);
    --sp-shadow-sidebar: 2px 0 10px rgba(0, 0, 0, 0.06);
    --sp-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* =============================================
   PLUM THEME (Deep purple)
   ============================================= */
[data-theme="plum"] {
    --sp-bg-primary: #18151a;
    --sp-bg-secondary: #221e26;
    --sp-bg-sidebar: #18151a;
    --sp-bg-header: #3d2d48;
    --sp-bg-toolbar: #221e26;
    --sp-bg-card: #282430;
    --sp-bg-card-hover: #322e3a;
    --sp-text-primary: #e0dce4;
    --sp-text-secondary: #b0a8b8;
    --sp-text-muted: #706880;
    --sp-text-header: #ffffff;
    --sp-text-sidebar: #605870;
    --sp-text-sidebar-active: #ffffff;
    --sp-border-color: rgba(160, 140, 200, 0.12);
    --sp-border-sidebar: rgba(160, 140, 200, 0.08);
    --sp-accent-primary: #9a7ab8;
    --sp-accent-secondary: #b08ac8;
    --sp-accent-green: #7ab88a;
    --sp-accent-red: #c75b7a;
    --sp-btn-upload-bg: #8a6aa0;
    --sp-btn-search-bg: #3a2d48;
    --sp-btn-accent-bg: #9a7ab8;
    --sp-tooltip-bg: #6a4a80;
    --sp-tooltip-text: #ffffff;
    --sp-shadow-sidebar: 2px 0 15px rgba(0, 0, 0, 0.35);
    --sp-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25);
}
[data-theme="plum"][data-mode="light"] {
    --sp-bg-primary: #f5f3f7;
    --sp-bg-secondary: #ffffff;
    --sp-bg-sidebar: #faf8fc;
    --sp-bg-header: #3d2d48;
    --sp-bg-toolbar: #ffffff;
    --sp-bg-card: #ece8f2;
    --sp-bg-card-hover: #e0dae8;
    --sp-text-primary: #1f1a25;
    --sp-text-secondary: #524a5a;
    --sp-text-muted: #827a8a;
    --sp-text-sidebar: #625a6a;
    --sp-text-sidebar-active: #3d2d48;
    --sp-border-color: rgba(61, 45, 72, 0.12);
    --sp-border-sidebar: rgba(61, 45, 72, 0.08);
    --sp-shadow-sidebar: 2px 0 10px rgba(0, 0, 0, 0.06);
    --sp-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* =============================================
   TEAL THEME (Muted cyan)
   ============================================= */
[data-theme="teal"] {
    --sp-bg-primary: #151a1a;
    --sp-bg-secondary: #1e2626;
    --sp-bg-sidebar: #151a1a;
    --sp-bg-header: #2a4045;
    --sp-bg-toolbar: #1e2626;
    --sp-bg-card: #222c2c;
    --sp-bg-card-hover: #2c3838;
    --sp-text-primary: #dce4e4;
    --sp-text-secondary: #a8b8b8;
    --sp-text-muted: #6b7c7c;
    --sp-text-header: #ffffff;
    --sp-text-sidebar: #5a6c6c;
    --sp-text-sidebar-active: #ffffff;
    --sp-border-color: rgba(140, 200, 200, 0.12);
    --sp-border-sidebar: rgba(140, 200, 200, 0.08);
    --sp-accent-primary: #5a9e9e;
    --sp-accent-secondary: #6bb8b8;
    --sp-accent-green: #5a9e7a;
    --sp-accent-red: #c7705b;
    --sp-btn-upload-bg: #5a8a8a;
    --sp-btn-search-bg: #2a4045;
    --sp-btn-accent-bg: #5a9e9e;
    --sp-tooltip-bg: #3a5858;
    --sp-tooltip-text: #ffffff;
    --sp-shadow-sidebar: 2px 0 15px rgba(0, 0, 0, 0.35);
    --sp-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25);
}
[data-theme="teal"][data-mode="light"] {
    --sp-bg-primary: #f3f7f7;
    --sp-bg-secondary: #ffffff;
    --sp-bg-sidebar: #f8fcfc;
    --sp-bg-header: #2a4045;
    --sp-bg-toolbar: #ffffff;
    --sp-bg-card: #e8f0f0;
    --sp-bg-card-hover: #dce6e6;
    --sp-text-primary: #1a2222;
    --sp-text-secondary: #4a5a5a;
    --sp-text-muted: #7a8a8a;
    --sp-text-sidebar: #5a6a6a;
    --sp-text-sidebar-active: #2a4045;
    --sp-border-color: rgba(42, 64, 69, 0.12);
    --sp-border-sidebar: rgba(42, 64, 69, 0.08);
    --sp-shadow-sidebar: 2px 0 10px rgba(0, 0, 0, 0.06);
    --sp-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* =============================================
   WINE THEME (Deep burgundy)
   ============================================= */
[data-theme="wine"] {
    --sp-bg-primary: #1a1516;
    --sp-bg-secondary: #261e20;
    --sp-bg-sidebar: #1a1516;
    --sp-bg-header: #4d2d35;
    --sp-bg-toolbar: #261e20;
    --sp-bg-card: #2c2426;
    --sp-bg-card-hover: #382e32;
    --sp-text-primary: #e4dce0;
    --sp-text-secondary: #b8a8b0;
    --sp-text-muted: #7c6b70;
    --sp-text-header: #ffffff;
    --sp-text-sidebar: #6c5a60;
    --sp-text-sidebar-active: #ffffff;
    --sp-border-color: rgba(200, 140, 150, 0.12);
    --sp-border-sidebar: rgba(200, 140, 150, 0.08);
    --sp-accent-primary: #a85a6a;
    --sp-accent-secondary: #c06a7a;
    --sp-accent-green: #7ab88a;
    --sp-accent-red: #a85a5a;
    --sp-btn-upload-bg: #8a4a5a;
    --sp-btn-search-bg: #3d2530;
    --sp-btn-accent-bg: #a85a6a;
    --sp-tooltip-bg: #6a3a48;
    --sp-tooltip-text: #ffffff;
    --sp-shadow-sidebar: 2px 0 15px rgba(0, 0, 0, 0.35);
    --sp-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25);
}
[data-theme="wine"][data-mode="light"] {
    --sp-bg-primary: #f7f3f4;
    --sp-bg-secondary: #ffffff;
    --sp-bg-sidebar: #fcf8f9;
    --sp-bg-header: #4d2d35;
    --sp-bg-toolbar: #ffffff;
    --sp-bg-card: #f0e8ea;
    --sp-bg-card-hover: #e6dade;
    --sp-text-primary: #251a1c;
    --sp-text-secondary: #5a4a4e;
    --sp-text-muted: #8a7a7e;
    --sp-text-sidebar: #6a5a5e;
    --sp-text-sidebar-active: #4d2d35;
    --sp-border-color: rgba(77, 45, 53, 0.12);
    --sp-border-sidebar: rgba(77, 45, 53, 0.08);
    --sp-shadow-sidebar: 2px 0 10px rgba(0, 0, 0, 0.06);
    --sp-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* =============================================
   OLIVE THEME (Muted army green)
   ============================================= */
[data-theme="olive"] {
    --sp-bg-primary: #181a16;
    --sp-bg-secondary: #22241e;
    --sp-bg-sidebar: #181a16;
    --sp-bg-header: #3d4030;
    --sp-bg-toolbar: #22241e;
    --sp-bg-card: #282a22;
    --sp-bg-card-hover: #32352c;
    --sp-text-primary: #e0e4dc;
    --sp-text-secondary: #b0b8a8;
    --sp-text-muted: #707c6b;
    --sp-text-header: #ffffff;
    --sp-text-sidebar: #606c5a;
    --sp-text-sidebar-active: #ffffff;
    --sp-border-color: rgba(180, 200, 150, 0.12);
    --sp-border-sidebar: rgba(180, 200, 150, 0.08);
    --sp-accent-primary: #8a9e6a;
    --sp-accent-secondary: #9ab87a;
    --sp-accent-green: #8a9e6a;
    --sp-accent-red: #c7705b;
    --sp-btn-upload-bg: #6a8050;
    --sp-btn-search-bg: #3a4030;
    --sp-btn-accent-bg: #8a9e6a;
    --sp-tooltip-bg: #505840;
    --sp-tooltip-text: #ffffff;
    --sp-shadow-sidebar: 2px 0 15px rgba(0, 0, 0, 0.35);
    --sp-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25);
}
[data-theme="olive"][data-mode="light"] {
    --sp-bg-primary: #f5f7f3;
    --sp-bg-secondary: #ffffff;
    --sp-bg-sidebar: #fafcf8;
    --sp-bg-header: #3d4030;
    --sp-bg-toolbar: #ffffff;
    --sp-bg-card: #ecf0e8;
    --sp-bg-card-hover: #e0e6da;
    --sp-text-primary: #1f221a;
    --sp-text-secondary: #525a4a;
    --sp-text-muted: #828a7a;
    --sp-text-sidebar: #626a5a;
    --sp-text-sidebar-active: #3d4030;
    --sp-border-color: rgba(61, 64, 48, 0.12);
    --sp-border-sidebar: rgba(61, 64, 48, 0.08);
    --sp-shadow-sidebar: 2px 0 10px rgba(0, 0, 0, 0.06);
    --sp-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* =============================================
   CHARCOAL THEME (Neutral gray - renamed from dark)
   ============================================= */
[data-theme="charcoal"] {
    --sp-bg-primary: #1a1a1a;
    --sp-bg-secondary: #242424;
    --sp-bg-sidebar: #1a1a1a;
    --sp-bg-header: #2d2d2d;
    --sp-bg-toolbar: #242424;
    --sp-bg-card: #2a2a2a;
    --sp-bg-card-hover: #333333;
    --sp-text-primary: #e0e0e0;
    --sp-text-secondary: #a0a0a0;
    --sp-text-muted: #707070;
    --sp-text-header: #ffffff;
    --sp-text-sidebar: #707070;
    --sp-text-sidebar-active: #ffffff;
    --sp-border-color: rgba(255, 255, 255, 0.1);
    --sp-border-sidebar: rgba(255, 255, 255, 0.06);
    --sp-accent-primary: #6b8cce;
    --sp-accent-secondary: #5a9fd4;
    --sp-accent-green: #5cb85c;
    --sp-accent-red: #d9534f;
    --sp-btn-upload-bg: #5a7a8e;
    --sp-btn-search-bg: #3a4a5a;
    --sp-btn-accent-bg: #5a9fd4;
    --sp-tooltip-bg: #404040;
    --sp-tooltip-text: #ffffff;
    --sp-shadow-sidebar: 2px 0 15px rgba(0, 0, 0, 0.4);
    --sp-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
}
[data-theme="charcoal"][data-mode="light"] {
    --sp-bg-primary: #f5f5f5;
    --sp-bg-secondary: #ffffff;
    --sp-bg-sidebar: #fafafa;
    --sp-bg-header: #404040;
    --sp-bg-toolbar: #ffffff;
    --sp-bg-card: #ebebeb;
    --sp-bg-card-hover: #e0e0e0;
    --sp-text-primary: #1a1a1a;
    --sp-text-secondary: #505050;
    --sp-text-muted: #808080;
    --sp-text-sidebar: #606060;
    --sp-text-sidebar-active: #1a1a1a;
    --sp-border-color: rgba(0, 0, 0, 0.1);
    --sp-border-sidebar: rgba(0, 0, 0, 0.06);
    --sp-shadow-sidebar: 2px 0 10px rgba(0, 0, 0, 0.06);
    --sp-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* =============================================
   MIDNIGHT THEME (True black/OLED - renamed from black)
   ============================================= */
[data-theme="midnight"] {
    --sp-bg-primary: #000000;
    --sp-bg-secondary: #0a0a0a;
    --sp-bg-sidebar: #000000;
    --sp-bg-header: #0f0f0f;
    --sp-bg-toolbar: #0a0a0a;
    --sp-bg-card: #121212;
    --sp-bg-card-hover: #1a1a1a;
    --sp-text-primary: #e8e8e8;
    --sp-text-secondary: #a0a0a0;
    --sp-text-muted: #606060;
    --sp-text-header: #ffffff;
    --sp-text-sidebar: #606060;
    --sp-text-sidebar-active: #ffffff;
    --sp-border-color: rgba(255, 255, 255, 0.12);
    --sp-border-sidebar: rgba(255, 255, 255, 0.08);
    --sp-accent-primary: #bb86fc;
    --sp-accent-secondary: #03dac6;
    --sp-accent-green: #4caf50;
    --sp-accent-red: #cf6679;
    --sp-btn-upload-bg: #7c4dff;
    --sp-btn-search-bg: #1f1f1f;
    --sp-btn-accent-bg: #03dac6;
    --sp-tooltip-bg: #1f1f1f;
    --sp-tooltip-text: #ffffff;
    --sp-shadow-sidebar: 2px 0 20px rgba(0, 0, 0, 0.8);
    --sp-shadow-card: 0 2px 10px rgba(0, 0, 0, 0.6);
}
[data-theme="midnight"][data-mode="light"] {
    --sp-bg-primary: #f8f8f8;
    --sp-bg-secondary: #ffffff;
    --sp-bg-sidebar: #ffffff;
    --sp-bg-header: #1a1a1a;
    --sp-bg-toolbar: #ffffff;
    --sp-bg-card: #f0f0f0;
    --sp-bg-card-hover: #e8e8e8;
    --sp-text-primary: #0a0a0a;
    --sp-text-secondary: #404040;
    --sp-text-muted: #707070;
    --sp-text-sidebar: #505050;
    --sp-text-sidebar-active: #0a0a0a;
    --sp-border-color: rgba(0, 0, 0, 0.12);
    --sp-border-sidebar: rgba(0, 0, 0, 0.08);
    --sp-shadow-sidebar: 2px 0 10px rgba(0, 0, 0, 0.08);
    --sp-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* =============================================
   FRONTEND VARIABLE ALIASES

   The --fe- names the public theme is written against, resolved from the palette
   above. They used to live in frontend-dark.css, which only the public layout
   loads, so a page built from frontend classes had no values at all when served
   inside the account shell: headings fell back to a near black on a dark page and
   text to the browser's link blue. Rewards, Resellers and Upgrade all looked that
   way inside the account chrome.

   They belong here because both layouts load this file, so both resolve them.
   ============================================= */
:root {
    --fe-bg-primary: var(--sp-bg-primary);
    --fe-bg-secondary: var(--sp-bg-secondary);
    --fe-bg-card: var(--sp-bg-card);
    --fe-bg-elevated: var(--sp-bg-card-hover);
    --fe-bg-input: var(--sp-bg-card-hover);
    --fe-text-primary: var(--sp-text-primary);
    --fe-text-secondary: var(--sp-text-secondary);
    --fe-text-muted: var(--sp-text-muted);
    --fe-border-color: var(--sp-border-color);
    --fe-border-strong: var(--sp-border-color);
    --fe-accent-primary: var(--sp-accent-primary);
    --fe-accent-secondary: var(--sp-accent-secondary);
    --fe-link-color: var(--sp-accent-primary);
    --fe-link-hover: var(--sp-accent-secondary);
    --fe-blue-text: var(--sp-accent-primary);
}