/*
 * IMPACCT 2.0 — Theme System
 *
 * Four themes from the UI specification (impacct-ui-specs.md):
 *   Midnight — deep dark, electric blue accents (default night theme)
 *   Aurora   — light premium, violet accents (default day theme)
 *   Sandstone — warm earthy, terracotta accents (light)
 *   Neon — cyberpunk dark, cyan accents (dark)
 *
 * Auto day/night mode: Aurora (day) ↔ Midnight (night), configurable.
 * All colors via CSS variables — NEVER hardcode colors anywhere else.
 */

/* ══════════════════════════════════════
   1. MIDNIGHT — Deep dark, electric blue
   Default night theme
   ══════════════════════════════════════ */
:root,
:root[data-theme="midnight"] {
    --bg-primary: #0B0D14;
    --bg-secondary: #12151F;
    --bg-tertiary: #1A1E2E;
    --bg-card: #161A26;
    --bg-hover: #1e2436;

    --text-primary: #F0F2F5;
    --text-secondary: #9BA3B5;
    --text-muted: #5D6778;

    --accent-primary: #3B82F6;
    --accent-secondary: #6366f1;
    --accent-hover: #2563eb;

    --border-primary: rgba(255, 255, 255, 0.08);
    --border-secondary: rgba(255, 255, 255, 0.12);

    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;
    --color-info: #06b6d4;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);

    --sidebar-bg: #0B0D14;
    --sidebar-text: #9BA3B5;
    --sidebar-active: #3B82F6;
    --sidebar-hover: #12151F;

    --btn-primary-bg: #3B82F6;
    --btn-primary-text: #ffffff;
    --btn-primary-hover: #2563eb;

    --input-bg: #12151F;
    --input-border: rgba(255, 255, 255, 0.08);
    --input-text: #F0F2F5;
    --input-placeholder: #5D6778;
    --input-focus-border: #3B82F6;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

/* ══════════════════════════════════════
   2. AURORA — Light premium, violet accents
   Default day theme
   ══════════════════════════════════════ */
:root[data-theme="aurora"] {
    --bg-primary: #FAFBFC;
    --bg-secondary: #F1F5F9;
    --bg-tertiary: #E8EEF4;
    --bg-card: #FFFFFF;
    --bg-hover: #EDF2F7;

    --text-primary: #0F172A;
    --text-secondary: #374151;
    --text-muted: #64748B;

    --accent-primary: #8B5CF6;
    --accent-secondary: #7C3AED;
    --accent-hover: #7C3AED;

    --border-primary: rgba(0, 0, 0, 0.08);
    --border-secondary: rgba(0, 0, 0, 0.12);

    --color-success: #059669;
    --color-warning: #D97706;
    --color-danger: #DC2626;
    --color-info: #0891B2;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    --sidebar-bg: #F1F5F9;
    --sidebar-text: #475569;
    --sidebar-active: #8B5CF6;
    --sidebar-hover: #E8EEF4;

    --btn-primary-bg: #8B5CF6;
    --btn-primary-text: #ffffff;
    --btn-primary-hover: #7C3AED;

    --input-bg: #FFFFFF;
    --input-border: rgba(0, 0, 0, 0.08);
    --input-text: #0F172A;
    --input-placeholder: #94A3B8;
    --input-focus-border: #8B5CF6;
}

/* ══════════════════════════════════════
   3. SANDSTONE — Warm earthy, terracotta accents
   Light theme
   ══════════════════════════════════════ */
:root[data-theme="sandstone"] {
    --bg-primary: #FAF8F5;
    --bg-secondary: #F5F0E8;
    --bg-tertiary: #EBE4D8;
    --bg-card: #FFFEFA;
    --bg-hover: #F0EBE0;

    --text-primary: #2D2A26;
    --text-secondary: #504A42;
    --text-muted: #7A7368;

    --accent-primary: #C45D35;
    --accent-secondary: #A84E2D;
    --accent-hover: #A84E2D;

    --border-primary: rgba(45, 42, 38, 0.1);
    --border-secondary: rgba(45, 42, 38, 0.15);

    --color-success: #5A8F5A;
    --color-warning: #C99B4A;
    --color-danger: #B84E4E;
    --color-info: #4A8A9C;

    --shadow-sm: 0 1px 2px rgba(45, 42, 38, 0.06);
    --shadow-md: 0 4px 6px rgba(45, 42, 38, 0.1);
    --shadow-lg: 0 10px 15px rgba(45, 42, 38, 0.12);

    --sidebar-bg: #2D2A26;
    --sidebar-text: #D1C5B4;
    --sidebar-active: #C45D35;
    --sidebar-hover: #3D3226;

    --btn-primary-bg: #C45D35;
    --btn-primary-text: #ffffff;
    --btn-primary-hover: #A84E2D;

    --input-bg: #FFFEFA;
    --input-border: rgba(45, 42, 38, 0.1);
    --input-text: #2D2A26;
    --input-placeholder: #A69F94;
    --input-focus-border: #C45D35;
}

/* ══════════════════════════════════════
   4. NEON — Cyberpunk dark, cyan accents
   Dark theme
   ══════════════════════════════════════ */
:root[data-theme="neon"] {
    --bg-primary: #0A0A0C;
    --bg-secondary: #0F0F12;
    --bg-tertiary: #151518;
    --bg-card: #111114;
    --bg-hover: #1a1a22;

    --text-primary: #EAEAEA;
    --text-secondary: #A0A0A0;
    --text-muted: #606060;

    --accent-primary: #00F0FF;
    --accent-secondary: #00C8D6;
    --accent-hover: #00C8D6;

    --border-primary: rgba(255, 255, 255, 0.06);
    --border-secondary: rgba(255, 255, 255, 0.1);

    --color-success: #00FF9D;
    --color-warning: #FFD600;
    --color-danger: #FF3366;
    --color-info: #00F0FF;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.6);

    --sidebar-bg: #0A0A0C;
    --sidebar-text: #A0A0A0;
    --sidebar-active: #00F0FF;
    --sidebar-hover: #0F0F12;

    --btn-primary-bg: #00F0FF;
    --btn-primary-text: #0A0A0C;
    --btn-primary-hover: #00C8D6;

    --input-bg: #0F0F12;
    --input-border: rgba(255, 255, 255, 0.06);
    --input-text: #EAEAEA;
    --input-placeholder: #606060;
    --input-focus-border: #00F0FF;
}