/* Default theme: dark (when no data-theme or data-theme="dark") */
:root,
[data-theme="dark"] {

   /* =========================
   COLOR SYSTEM
========================= */


   /* -----------------
     Surfaces
  ----------------- */
   --bg-gradient: radial-gradient(circle at top, var(--surface-1), var(--surface-0) 70%);
   --card-bg: var(--surface-3);
   --card-border: var(--border-subtle);
   --card-hover-border: var(--brand-primary);
   --card-hover-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 35px rgba(124, 92, 255, 0.35);

   /* -----------------
     Accent / Brand
  ----------------- */
   --accent: var(--brand-primary);
   --accent-hover: var(--brand-primary-hover);

   /* -----------------
     Progress / Bars
  ----------------- */
   --progress-bg: var(--surface-2);
   --progress-fill: var(--brand-primary);

   /* -----------------
     Links / Buttons
  ----------------- */
   --link-color: var(--brand-primary);
   --link-hover: var(--brand-primary-hover);

   /* -----------------
     Misc
  ----------------- */
   --text-light: var(--text-main);
   --text-muted-light: var(--text-muted);

   /* ---- Surfaces (Dark UI Layers) ---- */
   --surface-0: #1c1f25;
   /* app background, very dark */
   --surface-1: #232629;
   /* header/sidebar background */
   --surface-2: #2b2d31;
   /* cards / stat cards → more neutral gray */
   --surface-3: #313338;
   /* widget cards → soft gray */
   --surface-4: #3a3c40;
   /* legacy aliases (so layout stays dark if old refs or wholesale.css removed) */
   --primary-bg: var(--surface-0);
   --secondary-bg: var(--surface-2);
   /* hover / highlight → lighter gray */
   --surface-active: #46484d;
   /* active / selected → subtle but visible */


   /* ---- Text ---- */
   --text-strong: #f5f7fa;
   --text-main: #d6dbe3;
   --text-muted: #9aa4b2;
   --text-faint: #6b7380;
   --text-inverse: #0f1115;

   /* ---- Brand ---- */
   --brand-primary: #9b7ebd;
   --brand-primary-hover: #8565a3;
   --brand-primary-alpha: rgba(155, 126, 189, 0.25);
   --brand-accent: #00d4ff;

   /* ---- Status (Dark Theme Friendly, Softened) ---- */
   --success: #1f7a3e;
   /* softer dark green */
   --warning: #b28f1a;
   /* muted gold, warmer but not neon */
   --warning-rgb: 178, 143, 26;
   /* for rgba(var(--warning-rgb), alpha) */
   --error: #b45c5c;
   /* deep red, darker and more subtle */
   --error-rgb: 180, 92, 92;
   /* for rgba(--error-rgb, alpha) */
   --info: #0c8dbd;
   /* muted teal-blue */
   --info-hover: #0a7a9e;

   /* ================= Task BADGE COLORS ================= */
   /* Clearly distinct from surface-2/3 and from each other */

   --badge-basic: #5e6572;
   /* neutral slate */
   --badge-yesno: #456088;
   /* steel blue */
   --badge-photo: #726840;
   /* muted yellow / amber */
   --badge-textbox: #3d6b58;
   /* muted teal */
   --badge-header: #6b5585;
   /* desaturated lavender */


   /* ---- Borders ---- */
   --border-subtle: #232a3a;
   --border-strong: #2f3a52;
   --border-color: #232a3a;
   /* alias for legacy refs */

   /* ---- Shadows ---- */
   --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
   --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5);
   --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.6);

   /* =========================
   SPACING SYSTEM
========================= */
   --spacing-xs: 4px;
   --spacing-sm: 8px;
   --spacing-md: 16px;
   --spacing-lg: 24px;
   --spacing-xl: 32px;

   /* =========================
   RADIUS
========================= */
   --radius-sm: 6px;
   --radius-md: 10px;
   --radius-lg: 16px;
   --radius-pill: 9999px;

   /* =========================
   TYPOGRAPHY
========================= */
   --font-family-base: 'Inter', system-ui, sans-serif;
   --font-size-small: 0.85rem;
   --font-size-base: 1rem;
   --font-size-lg: 1.25rem;
   --font-sm: 0.85rem;
   --font-md: 1rem;
   /* legacy aliases */

   /* =========================
   TRANSITIONS
========================= */
   --transition-fast: 0.15s ease;
   --transition-medium: 0.25s ease;

   /* =========================
   LAYOUT
========================= */
   --header-height: 70px;
   --rolebar-height: 36px;
   --touch-target-min: 44px;
   /* Safe area for notched devices (phones/tablets) */
   --safe-area-inset-top: env(safe-area-inset-top, 0px);
   --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
   --safe-area-inset-left: env(safe-area-inset-left, 0px);
   --safe-area-inset-right: env(safe-area-inset-right, 0px);

   /* ---- Legacy aliases (tasks.css, add_edit_tasks.css) ---- */
   --bg-card: var(--surface-2);
   --bg-hover: var(--surface-3);
   --bg-muted: var(--surface-1);
   --bg-error: var(--error);
   --bg-success: var(--success);
   --color-bg-alt: var(--surface-1);
   --color-bg-card: var(--surface-2);
   --color-border: var(--border-subtle);
   --color-accent: var(--brand-primary);
   --color-text-main: var(--text-main);

}

/* =========================
   THEME: Light (muted, same feel)
========================= */
[data-theme="light"] {
   --bg-gradient: radial-gradient(circle at top, #e8e9ec, #dfe1e5 70%);
   --card-bg: var(--surface-3);
   --card-border: var(--border-subtle);
   --card-hover-border: var(--brand-primary);
   --card-hover-shadow: 0 12px 30px rgba(0, 0, 0, 0.12), 0 0 20px rgba(120, 90, 150, 0.2);

   --surface-0: #e2e4e8;
   --surface-1: #d4d6db;
   --surface-2: #c8cad0;
   --surface-3: #bcc0c7;
   --surface-4: #b0b4bc;
   --primary-bg: var(--surface-0);
   --secondary-bg: var(--surface-2);
   --surface-active: #9ca0a8;

   --text-strong: #1a1d24;
   --text-main: #2d323d;
   --text-muted: #4f5666;
   --text-faint: #6b7380;
   --text-inverse: #f5f7fa;

   --brand-primary: #6b5b7a;
   --brand-primary-hover: #5a4c68;
   --brand-primary-alpha: rgba(107, 91, 122, 0.2);
   --brand-accent: #0a8fa8;

   --success: #1a6b34;
   --warning: #8a6f15;
   --warning-rgb: 138, 111, 21;
   --error: #a04d4d;
   --error-rgb: 160, 77, 77;
   --info: #0a6d8a;
   --info-hover: #085a72;

   --badge-basic: #5a5e66;
   --badge-yesno: #3d5270;
   --badge-photo: #6b5c38;
   --badge-textbox: #355a4a;
   --badge-header: #554a64;

   --border-subtle: #a8acb5;
   --border-strong: #8a8f9a;
   --border-color: #a8acb5;

   --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
   --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.12);

   --bg-card: var(--surface-2);
   --bg-hover: var(--surface-3);
   --bg-muted: var(--surface-1);
   --color-bg-alt: var(--surface-1);
   --color-bg-card: var(--surface-2);
   --color-border: var(--border-subtle);
   --color-accent: var(--brand-primary);
   --color-text-main: var(--text-main);
}

/* =========================
   THEME: Grayscale (neutral, no purple)
========================= */
[data-theme="grayscale"] {
   --bg-gradient: radial-gradient(circle at top, var(--surface-1), var(--surface-0) 70%);
   --card-bg: var(--surface-3);
   --card-border: var(--border-subtle);
   --card-hover-border: var(--brand-primary);
   --card-hover-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(80, 95, 110, 0.2);

   --surface-0: #1e2126;
   --surface-1: #262a30;
   --surface-2: #2e3239;
   --surface-3: #363b43;
   --surface-4: #3e444d;
   --primary-bg: var(--surface-0);
   --secondary-bg: var(--surface-2);
   --surface-active: #4a5059;

   --text-strong: #e8eaef;
   --text-main: #c2c6ce;
   --text-muted: #8e949e;
   --text-faint: #6b7180;
   --text-inverse: #0f1115;

   --brand-primary: #6b7a8a;
   --brand-primary-hover: #5c6a78;
   --brand-primary-alpha: rgba(107, 122, 138, 0.25);
   --brand-accent: #7a8fa0;

   --success: #2d6b3e;
   --warning: #8a7a2a;
   --warning-rgb: 138, 122, 42;
   --error: #9e5555;
   --error-rgb: 158, 85, 85;
   --info: #0c6d85;
   --info-hover: #0a5a6e;

   --badge-basic: #5a6068;
   --badge-yesno: #455068;
   --badge-photo: #6b6340;
   --badge-textbox: #3d5a52;
   --badge-header: #5a6270;

   --border-subtle: #3a4048;
   --border-strong: #4a5059;
   --border-color: #3a4048;

   --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35);
   --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4);
   --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.5);

   --bg-card: var(--surface-2);
   --bg-hover: var(--surface-3);
   --bg-muted: var(--surface-1);
   --color-bg-alt: var(--surface-1);
   --color-bg-card: var(--surface-2);
   --color-border: var(--border-subtle);
   --color-accent: var(--brand-primary);
   --color-text-main: var(--text-main);
}

/* =========================
   THEME: Pink (dark mode with subtle pink text & brand accent)
========================= */
[data-theme="pink"] {
   --bg-gradient: radial-gradient(circle at top, var(--surface-1), var(--surface-0) 70%);
   --card-bg: var(--surface-3);
   --card-border: var(--border-subtle);
   --card-hover-border: var(--brand-primary);
   --card-hover-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 25px rgba(180, 140, 155, 0.2);

   /* Dark surfaces (same feel as dark/grayscale), very slight warm tint */
   --surface-0: #1e1c1e;
   --surface-1: #262428;
   --surface-2: #2e2c30;
   --surface-3: #363438;
   --surface-4: #3e3c40;
   --primary-bg: var(--surface-0);
   --secondary-bg: var(--surface-2);
   --surface-active: #4a464a;

   /* Text: subtle pink tint so the theme reads as pink without losing readability */
   --text-strong: #f2eaed;
   --text-main: #dfd4d8;
   --text-muted: #b8a8ae;
   --text-faint: #8a7c82;
   --text-inverse: #0f0d0e;

   /* Brand / links: nice subtle pink (dusty rose, not neon) */
   --brand-primary: #c4a4b0;
   --brand-primary-hover: #d4b4c0;
   --brand-primary-alpha: rgba(196, 164, 176, 0.25);
   --brand-accent: #d8c0ca;

   --success: #2a7a44;
   --warning: #9a7a28;
   --warning-rgb: 154, 122, 40;
   --error: #b45c5c;
   --error-rgb: 180, 92, 92;
   --info: #0c8a9a;
   --info-hover: #0a7684;

   --badge-basic: #5e5860;
   --badge-yesno: #4a5068;
   --badge-photo: #6b5c48;
   --badge-textbox: #3d5a54;
   --badge-header: #7a6470;

   --border-subtle: #3a3638;
   --border-strong: #4a4448;
   --border-color: #3a3638;

   --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
   --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5);
   --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.55);

   --bg-card: var(--surface-2);
   --bg-hover: var(--surface-3);
   --bg-muted: var(--surface-1);
   --color-bg-alt: var(--surface-1);
   --color-bg-card: var(--surface-2);
   --color-border: var(--border-subtle);
   --color-accent: var(--brand-primary);
   --color-text-main: var(--text-main);
}