/* =========================================================
   csdash: Shared Neo-Brutalist Color Palette System
   Single source of truth for all theme variables, used by
   both the authenticated dashboard (styles.css) and the
   public pages (index, login, signup, mobile).
   ========================================================= */

:root {
    --bg-body: #ffffff;
    --bg-sidebar: #f0f0f0;
    --bg-main: #ffffff;
    --bg-secondary: #e6e6e6;
    --border-color: #000000;
    --border: #000000;
    --text-main: #000000;
    --color-text: #000000;
    --text-muted: #555555;

    --primary: #0000ff; /* Stark Web Blue */
    --success: #00cc00;
    --danger: #ff0000;
    --warning: #ffcc00;

    --border-width: 3px;
    --shadow-hard: 4px 4px 0px var(--border-color);
    --shadow-hover: 2px 2px 0px var(--border-color);
}

body.dark-mode {
    /* 1. Cool "slate" grays to give modern depth and reduce eye strain */
    --bg-body: #0f172a;      /* Deep slate */
    --bg-sidebar: #162032;   /* Slightly elevated slate */
    --bg-main: #1e293b;      /* Card background */
    --bg-secondary: #27364d; /* Hover states/secondary elements */

    /* 2. Soft, structural borders */
    --border-color: #5c7dac;
    --border: 2px solid var(--border-color); /* Kept at 2px for readability */

    /* 3. Off-white text to prevent OLED smearing and halation */
    --text-main: #f1f5f9;
    --color-text: #f1f5f9;
    --text-muted: #94a3b8;

    /* 4. A universally pleasing, vibrant-but-soft Default Blue */
    --primary: #3b82f6;

    /* 5. Harmonized, standard UI semantic colors */
    --success: #10b981; /* Emerald */
    --danger: #ef4444;  /* Soft Red */
    --warning: #f59e0b; /* Amber */

    /* 6. Shadows tied to the primary blue for a cohesive look */
    --shadow-hard: 4px 4px 0px var(--primary);
    --shadow-hover: 2px 2px 0px var(--primary);
}

body[data-theme="black"][data-theme-dark="false"] {
    --bg-body: #f5f5f5;
    --bg-sidebar: #ececec;
    --bg-main: #ffffff;
    --bg-secondary: #dedede;
    --border-color: #111111;
    --border: 3px solid var(--border-color);
    --text-main: #111111;
    --color-text: #111111;
    --text-muted: #444444;
    --primary: #111111;
    --success: #007a3d;
    --danger: #a1001d;
    --warning: #a86b00;
    --shadow-hard: 4px 4px 0px var(--border-color);
    --shadow-hover: 2px 2px 0px var(--border-color);
}

body[data-theme="black"][data-theme-dark="true"] {
    /* Warm-tinted charcoals instead of cold blue-grays */
    --bg-body: #1e1e20;
    --bg-sidebar: #26262a;
    --bg-main: #2a2a2e;
    --bg-secondary: #35353a;

    /* Slightly warmer border — less clinical */
    --border-color: #707070;

    /* Text: warm white, not clinical pure white */
    --text-main: #dddde3;
    --color-text: #dddde3;
    --text-muted: #7e7e88;

    /* Primary: soft lavender-white, easy on eyes */
    --primary: #e8e8f0;

    /* Status badges: desaturated & dimmed — no neon */
    --success: #3dba5a;
    --success-bg: #1a3324;
    --success-text: #5ddb7a;

    --danger: #d94f47;
    --danger-bg: #331a1a;
    --danger-text: #e87070;

    --warning: #c9920a;
    --warning-bg: #2e2510;
    --warning-text: #e0ac45;

    --shadow-hard: 4px 4px 0px rgba(0, 0, 0, 0.25);
    --shadow-hover: 2px 2px 0px rgba(0, 0, 0, 0.2);
}

body[data-theme="pink"][data-theme-dark="false"] {
    --bg-body: #fffafc;
    --bg-sidebar: #fff0f6;
    --bg-main: #ffffff;
    --bg-secondary: #ffe6f2;
    --border-color: #000000;
    --border: 3px solid var(--border-color);
    --text-main: #000000;
    --color-text: #000000;
    --text-muted: #555555;
    --primary: #ff2994;
    --success: #00b26a;
    --danger: #ff2444;
    --warning: #e0ac45;
    --shadow-hard: 4px 4px 0px var(--primary);
    --shadow-hover: 2px 2px 0px var(--primary);
}

body[data-theme="pink"][data-theme-dark="true"] {
    --bg-body: #160c12;
    --bg-sidebar: #1e1118;
    --bg-main: #26151f;
    --bg-secondary: #301b27;
    --border-color: #be618e;
    --border: 2px solid var(--border-color);
    --text-main: #fdf2f7;
    --color-text: #fdf2f7;
    --text-muted: #c9a3b6;
    --primary: #d63384;
    --success: #259c71;
    --danger: #ca132e;
    --warning: #dba110;
    --shadow-hard: 4px 4px 0px var(--primary);
    --shadow-hover: 2px 2px 0px var(--primary);
}

body[data-theme="green"][data-theme-dark="false"] {
    --bg-body: #f7fff7;
    --bg-sidebar: #eefaf0;
    --bg-main: #ffffff;
    --bg-secondary: #e6f6e9;
    --border-color: #003a2d;
    --border: 3px solid var(--border-color);
    --text-main: #002b20;
    --color-text: #002b20;
    --text-muted: #3b6b55;
    --primary: #00a86b;
    --success: #00cc66;
    --danger: #ff3b3b;
    --warning: #ffd27a;
    --shadow-hard: 4px 4px 0px var(--primary);
    --shadow-hover: 2px 2px 0px var(--primary);
}

body[data-theme="green"][data-theme-dark="true"] {
    --bg-body: #0b1411;
    --bg-sidebar: #111d18;
    --bg-main: #16261f;
    --bg-secondary: #1f332a;
    --border-color: #38835f;
    --border: 2px solid var(--border-color);
    --text-main: #edfdf5;
    --color-text: #edfdf5;
    --text-muted: #8eb09e;
    --primary: #10b981;
    --success: #00ffa2;
    --danger: #fd2c50;
    --warning: #fbbf24;
    --shadow-hard: 4px 4px 0px var(--primary);
    --shadow-hover: 2px 2px 0px var(--primary);
}

body[data-theme="orange"][data-theme-dark="false"] {
    --bg-body: #fffaf5;
    --bg-sidebar: #fff1e0;
    --bg-main: #ffffff;
    --bg-secondary: #ffe6cc;
    --border-color: #000000;
    --border: 3px solid var(--border-color);
    --text-main: #000000;
    --color-text: #000000;
    --text-muted: #5c4a38;
    --primary: #ff6a00;
    --success: #00a86b;
    --danger: #e2001a;
    --warning: #dba100;
    --shadow-hard: 4px 4px 0px var(--primary);
    --shadow-hover: 2px 2px 0px var(--primary);
}

body[data-theme="orange"][data-theme-dark="true"] {
    --bg-body: #1a120a;
    --bg-sidebar: #221609;
    --bg-main: #2b1c0d;
    --bg-secondary: #3a2712;
    --border-color: #d98a3d;
    --border: 2px solid var(--border-color);
    --text-main: #fff3e6;
    --color-text: #fff3e6;
    --text-muted: #c9a37a;
    --primary: #ff8c3a;
    --success: #34c98b;
    --danger: #ff6161;
    --warning: #ffcf5c;
    --shadow-hard: 4px 4px 0px var(--primary);
    --shadow-hover: 2px 2px 0px var(--primary);
}

body[data-theme="purple"][data-theme-dark="false"] {
    --bg-body: #fbf7ff;
    --bg-sidebar: #f2e9ff;
    --bg-main: #ffffff;
    --bg-secondary: #ece0ff;
    --border-color: #000000;
    --border: 3px solid var(--border-color);
    --text-main: #000000;
    --color-text: #000000;
    --text-muted: #55505c;
    --primary: #7c3aed;
    --success: #00a86b;
    --danger: #e2001a;
    --warning: #dba100;
    --shadow-hard: 4px 4px 0px var(--primary);
    --shadow-hover: 2px 2px 0px var(--primary);
}

body[data-theme="purple"][data-theme-dark="true"] {
    --bg-body: #140b1f;
    --bg-sidebar: #1c1029;
    --bg-main: #241433;
    --bg-secondary: #2e1a40;
    --border-color: #a374e0;
    --border: 2px solid var(--border-color);
    --text-main: #f5edff;
    --color-text: #f5edff;
    --text-muted: #b79fd1;
    --primary: #a855f7;
    --success: #34c98b;
    --danger: #ff6161;
    --warning: #ffcf5c;
    --shadow-hard: 4px 4px 0px var(--primary);
    --shadow-hover: 2px 2px 0px var(--primary);
}

body[data-theme="cyan"][data-theme-dark="false"] {
    --bg-body: #f5feff;
    --bg-sidebar: #e3fbff;
    --bg-main: #ffffff;
    --bg-secondary: #cff6fc;
    --border-color: #000000;
    --border: 3px solid var(--border-color);
    --text-main: #000000;
    --color-text: #000000;
    --text-muted: #4a5a5c;
    --primary: #00b8d9;
    --success: #00a86b;
    --danger: #e2001a;
    --warning: #dba100;
    --shadow-hard: 4px 4px 0px var(--primary);
    --shadow-hover: 2px 2px 0px var(--primary);
}

body[data-theme="cyan"][data-theme-dark="true"] {
    --bg-body: #061a1e;
    --bg-sidebar: #082126;
    --bg-main: #0c2a30;
    --bg-secondary: #113640;
    --border-color: #3fd0e8;
    --border: 2px solid var(--border-color);
    --text-main: #e8fbfd;
    --color-text: #e8fbfd;
    --text-muted: #8fc4cc;
    --primary: #22d3ee;
    --success: #34c98b;
    --danger: #ff6161;
    --warning: #ffcf5c;
    --shadow-hard: 4px 4px 0px var(--primary);
    --shadow-hover: 2px 2px 0px var(--primary);
}

body[data-theme="red"][data-theme-dark="false"] {
    --bg-body: #fff8f8;
    --bg-sidebar: #ffecec;
    --bg-main: #ffffff;
    --bg-secondary: #ffdada;
    --border-color: #000000;
    --border: 3px solid var(--border-color);
    --text-main: #000000;
    --color-text: #000000;
    --text-muted: #5c4a4a;
    --primary: #e2001a;
    --success: #00a86b;
    --danger: #a1001d;
    --warning: #dba100;
    --shadow-hard: 4px 4px 0px var(--primary);
    --shadow-hover: 2px 2px 0px var(--primary);
}

body[data-theme="red"][data-theme-dark="true"] {
    --bg-body: #1c0808;
    --bg-sidebar: #260b0b;
    --bg-main: #300f0f;
    --bg-secondary: #3d1414;
    --border-color: #e0625f;
    --border: 2px solid var(--border-color);
    --text-main: #fdeceb;
    --color-text: #fdeceb;
    --text-muted: #d19f9c;
    --primary: #ff4d4d;
    --success: #34c98b;
    --danger: #ff8080;
    --warning: #ffcf5c;
    --shadow-hard: 4px 4px 0px var(--primary);
    --shadow-hover: 2px 2px 0px var(--primary);
}