/* ==========================================================================
 * ak11 — THEMES
 *
 * Part 1 of 3. Load order is themes.css -> base.css -> pages.css, and it
 * matters: later files override earlier ones at equal specificity. base.html
 * links all three; login.html links only this one (it styles itself inline).
 *
 * This file is the SINGLE SOURCE OF TRUTH for the theme list, and it is
 * PARSED AT RUNTIME by _parse_themes() in app.py to build the settings theme
 * picker. To add a theme, make ONE edit: append a
 *
 *     [data-theme="your-theme"] { --theme-label: "Your Theme"; ... }
 *
 * block below. The picker renders it automatically, in the order the blocks
 * appear here, and its swatch reuses the block's own --background-color and
 * --primary-color — so there is no duplicate colour table anywhere to drift
 * out of sync. Do not add one.
 *
 * --theme-label is what MARKS a block as a theme. A [data-theme=...] rule
 * without it (e.g. the wishlist badge overrides in pages.css) is ignored.
 *
 * Small Screen Breakpoint: 940px
 * CSS media queries cannot use CSS variables, so we document the value here.
 * JavaScript uses window._ak11SmallScreenBreakpoint (defined in base.html).
 * ======================================================================== */

/* ==========================================================================
 * Theme: Bright (default)
 *
 * :root is the default theme — it declares every theme-able variable, and the
 * [data-theme] blocks below override them. A new theme only needs to override
 * what it changes.
 * ======================================================================== */
:root {
    /* Brand */
    --theme-label: "Bright";
    --primary-color: #4a90d9;
    --primary-dark: #357abd;
    --primary-light: rgba(74, 144, 217, 0.1);
    --primary-color-rgb: 74, 144, 217;
    --secondary-color: #6c757d;
    --success-color: #28a745;

    /* Surfaces */
    --background-color: #f5f7fa;
    --background-alt: #e9ecef;
    --card-background: #ffffff;
    --surface-elevated: #ffffff;
    --hover-bg: rgba(0, 0, 0, 0.04);

    /* Text */
    --text-color: #333333;
    --text-muted: #6c757d;

    /* Borders & shadows */
    --border-color: #e1e5eb;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --loading-overlay-bg: rgba(255, 255, 255, 0.8);
    color-scheme: light;

    /* Messages */
    --msg-primary-bg: #dcf8c6;
    --msg-other-bg: #e3f2fd;

    /* Notes */
    --note-bg: #fffef0;
    --note-border: #f0e68c;
    --note-accent: #ffc107;

    /* Calendar */
    --cal-day-bg: #e3f2fd;
    --cal-day-active: #bbdefb;
    --cal-day-image-wash: rgba(255, 255, 255, 0.72);

    /* Wash-out overlay for text on images / note insets */
    --wash-bg: rgba(255, 255, 255, 0.6);
    --wash-text-shadow: 255, 255, 255;

    /* Chart palette (RGB triplets – use with rgba() for alpha flexibility) */
    --chart-1: 74, 144, 217;    /* blue   */
    --chart-2: 40, 167, 69;     /* green  */
    --chart-3: 156, 39, 176;    /* purple */
    --chart-4: 255, 193, 7;     /* yellow */
    --chart-5: 255, 99, 132;    /* pink   */
    --chart-6: 153, 102, 255;   /* violet */
    --chart-7: 255, 159, 64;    /* orange */
    --chart-8: 75, 192, 192;    /* teal   */
    --chart-9: 54, 162, 235;    /* sky    */
    --chart-10: 201, 203, 207;  /* gray   */
    --chart-11: 255, 205, 86;   /* gold   */

    /* Chart text / grid (for Chart.js defaults) */
    --chart-text: #666666;
    --chart-grid: rgba(0, 0, 0, 0.1);

    /* NEPE emoji chart (dynamic hsla palette) */
    --chart-nepe-s: 70%;
    --chart-nepe-l: 60%;
    --chart-nepe-l-border: 50%;

    /* Layout (not theme-dependent, but kept together) */
    --radius: 8px;
    --radius-sm: 4px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --sidebar-width: 50%;
    --font-xs: 0.7rem;
    --font-sm: 0.75rem;
    --font-base: 0.85rem;
    --font-md: 0.9rem;
    --font-lg: 0.95rem;
    --font-xl: 1rem;
    --navbar-height: 50px;
}

/* (navbar-height is set dynamically by JS on all screen sizes) */

/* ==========================================================================
 * Theme: Desert Sky
 * ======================================================================== */
[data-theme="desert-sky"] {
    --theme-label: "Desert Sky";
    --primary-color: #5ba3d9;
    --primary-dark: #4588b8;
    --primary-light: rgba(91, 163, 217, 0.1);
    --primary-color-rgb: 91, 163, 217;
    --secondary-color: #8a8070;
    --success-color: #6a9a50;

    --background-color: #f5efe6;
    --background-alt: #ebe3d6;
    --card-background: #faf7f1;
    --surface-elevated: #faf7f1;
    --hover-bg: rgba(90, 70, 40, 0.05);

    --text-color: #3a3025;
    --text-muted: #887a68;

    --border-color: #ddd2c2;
    --shadow: 0 2px 8px rgba(50, 30, 10, 0.1);
    --loading-overlay-bg: rgba(245, 239, 230, 0.85);
    color-scheme: light;

    --msg-primary-bg: #e0efd8;
    --msg-other-bg: #d8e8f0;

    --note-bg: #fdf8ee;
    --note-border: #e8dcc0;
    --note-accent: #d4a84a;

    --cal-day-bg: #d8e8f0;
    --cal-day-active: #c0d8e8;
    --cal-day-image-wash: rgba(250, 247, 241, 0.72);

    --wash-bg: rgba(250, 247, 241, 0.6);
    --wash-text-shadow: 250, 247, 241;

    --chart-1: 91, 163, 217;
    --chart-2: 120, 170, 80;
    --chart-3: 180, 100, 140;
    --chart-4: 215, 175, 60;
    --chart-5: 210, 100, 100;
    --chart-6: 140, 110, 190;
    --chart-7: 215, 140, 60;
    --chart-8: 75, 175, 165;
    --chart-9: 100, 140, 200;
    --chart-10: 175, 165, 150;
    --chart-11: 195, 160, 70;

    --chart-text: #6a6050;
    --chart-grid: rgba(50, 30, 10, 0.08);

    --chart-nepe-s: 55%;
    --chart-nepe-l: 55%;
    --chart-nepe-l-border: 45%;
}

/* ==========================================================================
 * Theme: Sakura
 * ======================================================================== */
[data-theme="sakura"] {
    --theme-label: "Sakura";
    --primary-color: #d4789c;
    --primary-dark: #c06088;
    --primary-light: rgba(212, 120, 156, 0.1);
    --primary-color-rgb: 212, 120, 156;
    --secondary-color: #90858c;
    --success-color: #70a870;

    --background-color: #faf2f5;
    --background-alt: #f0e5ea;
    --card-background: #fdf8fa;
    --surface-elevated: #fdf8fa;
    --hover-bg: rgba(212, 120, 156, 0.06);

    --text-color: #3a2832;
    --text-muted: #907880;

    --border-color: #e8d5dd;
    --shadow: 0 2px 8px rgba(80, 30, 50, 0.08);
    --loading-overlay-bg: rgba(250, 242, 245, 0.85);
    color-scheme: light;

    --msg-primary-bg: #e8f0d8;
    --msg-other-bg: #f0e0ea;

    --note-bg: #fdf5f0;
    --note-border: #e8d0d8;
    --note-accent: #d09070;

    --cal-day-bg: #f0e0ea;
    --cal-day-active: #e5d0df;
    --cal-day-image-wash: rgba(253, 248, 250, 0.72);

    --wash-bg: rgba(253, 248, 250, 0.6);
    --wash-text-shadow: 253, 248, 250;

    --chart-1: 212, 120, 156;
    --chart-2: 110, 170, 110;
    --chart-3: 160, 100, 170;
    --chart-4: 220, 180, 70;
    --chart-5: 100, 155, 200;
    --chart-6: 180, 130, 190;
    --chart-7: 220, 145, 85;
    --chart-8: 80, 175, 165;
    --chart-9: 190, 115, 140;
    --chart-10: 170, 160, 168;
    --chart-11: 200, 165, 80;

    --chart-text: #706068;
    --chart-grid: rgba(80, 30, 50, 0.07);

    --chart-nepe-s: 50%;
    --chart-nepe-l: 60%;
    --chart-nepe-l-border: 50%;
}

/* ==========================================================================
 * Theme: Purple Mist
 * ======================================================================== */
[data-theme="purple-mist"] {
    --theme-label: "Purple Mist";
    --primary-color: #9070c0;
    --primary-dark: #7858a8;
    --primary-light: rgba(144, 112, 192, 0.1);
    --primary-color-rgb: 144, 112, 192;
    --secondary-color: #888098;
    --success-color: #60a060;

    --background-color: #f3f0f8;
    --background-alt: #e8e3f0;
    --card-background: #faf8fd;
    --surface-elevated: #faf8fd;
    --hover-bg: rgba(144, 112, 192, 0.06);

    --text-color: #302838;
    --text-muted: #807090;

    --border-color: #ddd5e8;
    --shadow: 0 2px 8px rgba(50, 30, 70, 0.1);
    --loading-overlay-bg: rgba(243, 240, 248, 0.85);
    color-scheme: light;

    --msg-primary-bg: #e0ecd8;
    --msg-other-bg: #e3ddf0;

    --note-bg: #f8f4ff;
    --note-border: #ddd0ee;
    --note-accent: #b888d0;

    --cal-day-bg: #e3ddf0;
    --cal-day-active: #d5cce5;
    --cal-day-image-wash: rgba(250, 248, 253, 0.72);

    --wash-bg: rgba(250, 248, 253, 0.6);
    --wash-text-shadow: 250, 248, 253;

    --chart-1: 144, 112, 192;
    --chart-2: 100, 175, 100;
    --chart-3: 200, 100, 140;
    --chart-4: 220, 185, 60;
    --chart-5: 220, 100, 110;
    --chart-6: 100, 140, 210;
    --chart-7: 220, 150, 70;
    --chart-8: 70, 180, 170;
    --chart-9: 170, 120, 200;
    --chart-10: 170, 165, 180;
    --chart-11: 200, 170, 80;

    --chart-text: #605070;
    --chart-grid: rgba(50, 30, 70, 0.08);

    --chart-nepe-s: 55%;
    --chart-nepe-l: 58%;
    --chart-nepe-l-border: 48%;
}

/* ==========================================================================
 * Theme: Sepia Rose
 * ======================================================================== */
[data-theme="sepia-rose"] {
    --theme-label: "Sepia Rose";
    --primary-color: #dc3040;
    --primary-dark: #c02030;
    --primary-light: rgba(220, 48, 64, 0.12);
    --primary-color-rgb: 220, 48, 64;
    --secondary-color: #9a8e85;
    --success-color: #6aaa5a;

    --background-color: #f0e8e0;
    --background-alt: #e5dbd2;
    --card-background: #f8f2ec;
    --surface-elevated: #f8f2ec;
    --hover-bg: rgba(220, 48, 64, 0.06);

    --text-color: #3a2020;
    --text-muted: #8a7a70;

    --border-color: #ddd0c5;
    --shadow: 0 2px 8px rgba(80, 30, 20, 0.1);
    --loading-overlay-bg: rgba(240, 232, 224, 0.85);
    color-scheme: light;

    --msg-primary-bg: #f0ccc5;
    --msg-other-bg: #e8e0d8;

    --note-bg: #faf4ea;
    --note-border: #e0d0c0;
    --note-accent: #d0a040;

    --cal-day-bg: #f0ccc5;
    --cal-day-active: #e8c0b8;
    --cal-day-image-wash: rgba(245, 235, 228, 0.82);

    --wash-bg: rgba(245, 235, 228, 0.75);
    --wash-text-shadow: 245, 235, 228;

    --chart-1: 220, 48, 64;
    --chart-2: 140, 150, 70;
    --chart-3: 200, 70, 110;
    --chart-4: 210, 175, 50;
    --chart-5: 60, 150, 200;
    --chart-6: 150, 100, 180;
    --chart-7: 210, 140, 50;
    --chart-8: 70, 170, 145;
    --chart-9: 200, 95, 65;
    --chart-10: 155, 148, 140;
    --chart-11: 195, 165, 60;

    --chart-text: #6a5a50;
    --chart-grid: rgba(80, 30, 20, 0.08);

    --chart-nepe-s: 55%;
    --chart-nepe-l: 55%;
    --chart-nepe-l-border: 45%;
}

/* ==========================================================================
 * Theme: Sunset
 * ======================================================================== */
[data-theme="sunset"] {
    --theme-label: "Sunset";
    --primary-color: #e87830;
    --primary-dark: #d06820;
    --primary-light: rgba(232, 120, 48, 0.15);
    --primary-color-rgb: 232, 120, 48;
    --secondary-color: #7088a0;
    --success-color: #60a880;

    --background-color: #101828;
    --background-alt: #182030;
    --card-background: #1e2838;
    --surface-elevated: #253040;
    --hover-bg: rgba(232, 120, 48, 0.08);

    --text-color: #e0dce0;
    --text-muted: #7888a0;

    --border-color: #2e3a4a;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    --loading-overlay-bg: rgba(16, 24, 40, 0.8);
    color-scheme: dark;

    --msg-primary-bg: #302820;
    --msg-other-bg: #162638;

    --note-bg: #282420;
    --note-border: #443828;
    --note-accent: #e0a030;

    --cal-day-bg: #162638;
    --cal-day-active: #1c2e42;
    --cal-day-image-wash: rgba(14, 20, 35, 0.7);

    --wash-bg: rgba(14, 20, 35, 0.6);
    --wash-text-shadow: 14, 20, 35;

    --chart-1: 232, 120, 48;
    --chart-2: 70, 160, 220;
    --chart-3: 230, 80, 100;
    --chart-4: 240, 200, 60;
    --chart-5: 80, 200, 180;
    --chart-6: 180, 120, 210;
    --chart-7: 250, 180, 40;
    --chart-8: 60, 130, 200;
    --chart-9: 240, 150, 80;
    --chart-10: 140, 155, 175;
    --chart-11: 220, 190, 70;

    --chart-text: #7888a0;
    --chart-grid: rgba(100, 150, 200, 0.08);

    --chart-nepe-s: 55%;
    --chart-nepe-l: 60%;
    --chart-nepe-l-border: 50%;
}

/* ==========================================================================
 * Theme: Ember
 * ======================================================================== */
[data-theme="ember"] {
    --theme-label: "Ember";
    --primary-color: #e05555;
    --primary-dark: #c43e3e;
    --primary-light: rgba(224, 85, 85, 0.15);
    --primary-color-rgb: 224, 85, 85;
    --secondary-color: #9a8080;
    --success-color: #6aab6a;

    --background-color: #1a1015;
    --background-alt: #261820;
    --card-background: #2e1e25;
    --surface-elevated: #382530;
    --hover-bg: rgba(224, 100, 100, 0.08);

    --text-color: #e8d5d5;
    --text-muted: #a08888;

    --border-color: #4a3038;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    --loading-overlay-bg: rgba(26, 16, 21, 0.75);
    color-scheme: dark;

    --msg-primary-bg: #3e1e28;
    --msg-other-bg: #252228;

    --note-bg: #302025;
    --note-border: #5a3540;
    --note-accent: #d06040;

    --cal-day-bg: #3a2530;
    --cal-day-active: #4a3038;
    --cal-day-image-wash: rgba(26, 16, 21, 0.65);

    --wash-bg: rgba(26, 16, 21, 0.5);
    --wash-text-shadow: 26, 16, 21;

    --chart-1: 224, 85, 85;
    --chart-2: 85, 180, 130;
    --chart-3: 200, 100, 160;
    --chart-4: 230, 180, 70;
    --chart-5: 100, 160, 210;
    --chart-6: 170, 110, 200;
    --chart-7: 230, 150, 70;
    --chart-8: 80, 180, 175;
    --chart-9: 140, 130, 210;
    --chart-10: 160, 145, 148;
    --chart-11: 210, 175, 90;

    --chart-text: #a08888;
    --chart-grid: rgba(200, 140, 140, 0.1);

    --chart-nepe-s: 45%;
    --chart-nepe-l: 58%;
    --chart-nepe-l-border: 48%;
}

/* ==========================================================================
 * Theme: Midnight
 * ======================================================================== */
[data-theme="midnight"] {
    --theme-label: "Midnight";
    --primary-color: #6a9fd8;
    --primary-dark: #5588c0;
    --primary-light: rgba(106, 159, 216, 0.15);
    --primary-color-rgb: 106, 159, 216;
    --secondary-color: #808890;
    --success-color: #5aaa5a;

    --background-color: #121418;
    --background-alt: #1a1d22;
    --card-background: #1e2228;
    --surface-elevated: #252a32;
    --hover-bg: rgba(106, 159, 216, 0.08);

    --text-color: #d8dce4;
    --text-muted: #808890;

    --border-color: #2e343c;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    --loading-overlay-bg: rgba(18, 20, 24, 0.8);
    color-scheme: dark;

    --msg-primary-bg: #1e2e20;
    --msg-other-bg: #1e2430;

    --note-bg: #22261e;
    --note-border: #3a4030;
    --note-accent: #a0903a;

    --cal-day-bg: #1e2430;
    --cal-day-active: #283040;
    --cal-day-image-wash: rgba(18, 20, 24, 0.65);

    --wash-bg: rgba(18, 20, 24, 0.55);
    --wash-text-shadow: 18, 20, 24;

    --chart-1: 106, 159, 216;
    --chart-2: 80, 190, 110;
    --chart-3: 190, 100, 180;
    --chart-4: 240, 195, 60;
    --chart-5: 230, 100, 110;
    --chart-6: 160, 130, 230;
    --chart-7: 240, 165, 70;
    --chart-8: 70, 200, 190;
    --chart-9: 100, 175, 235;
    --chart-10: 160, 165, 175;
    --chart-11: 215, 185, 80;

    --chart-text: #808890;
    --chart-grid: rgba(200, 210, 230, 0.08);

    --chart-nepe-s: 60%;
    --chart-nepe-l: 60%;
    --chart-nepe-l-border: 50%;
}

/* ==========================================================================
 * Theme: Ocean
 * ======================================================================== */
[data-theme="ocean"] {
    --theme-label: "Ocean";
    --primary-color: #40b8a8;
    --primary-dark: #309890;
    --primary-light: rgba(64, 184, 168, 0.15);
    --primary-color-rgb: 64, 184, 168;
    --secondary-color: #708898;
    --success-color: #55aa70;

    --background-color: #0e1820;
    --background-alt: #142028;
    --card-background: #182830;
    --surface-elevated: #1e3038;
    --hover-bg: rgba(64, 184, 168, 0.08);

    --text-color: #d0dce0;
    --text-muted: #708898;

    --border-color: #253840;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    --loading-overlay-bg: rgba(14, 24, 32, 0.8);
    color-scheme: dark;

    --msg-primary-bg: #183028;
    --msg-other-bg: #182838;

    --note-bg: #1e2828;
    --note-border: #304040;
    --note-accent: #80a848;

    --cal-day-bg: #182838;
    --cal-day-active: #203040;
    --cal-day-image-wash: rgba(14, 24, 32, 0.65);

    --wash-bg: rgba(14, 24, 32, 0.55);
    --wash-text-shadow: 14, 24, 32;

    --chart-1: 64, 184, 168;
    --chart-2: 130, 200, 90;
    --chart-3: 180, 110, 190;
    --chart-4: 240, 195, 60;
    --chart-5: 230, 110, 100;
    --chart-6: 140, 130, 220;
    --chart-7: 230, 160, 70;
    --chart-8: 80, 160, 220;
    --chart-9: 100, 210, 190;
    --chart-10: 150, 165, 175;
    --chart-11: 210, 180, 80;

    --chart-text: #708898;
    --chart-grid: rgba(150, 200, 210, 0.08);

    --chart-nepe-s: 55%;
    --chart-nepe-l: 60%;
    --chart-nepe-l-border: 50%;
}

/* ==========================================================================
 * Theme: Terminal
 * ======================================================================== */
[data-theme="terminal"] {
    --theme-label: "Terminal";
    --primary-color: #40c840;
    --primary-dark: #30a830;
    --primary-light: rgba(64, 200, 64, 0.12);
    --primary-color-rgb: 64, 200, 64;
    --secondary-color: #608860;
    --success-color: #50c050;

    --background-color: #0a100a;
    --background-alt: #101810;
    --card-background: #142014;
    --surface-elevated: #1a281a;
    --hover-bg: rgba(64, 200, 64, 0.06);

    --text-color: #b8d8b8;
    --text-muted: #608860;

    --border-color: #203820;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    --loading-overlay-bg: rgba(10, 16, 10, 0.8);
    color-scheme: dark;

    --msg-primary-bg: #182818;
    --msg-other-bg: #142218;

    --note-bg: #182018;
    --note-border: #304028;
    --note-accent: #c8a030;

    --cal-day-bg: #142218;
    --cal-day-active: #1a2e1a;
    --cal-day-image-wash: rgba(10, 16, 10, 0.7);

    --wash-bg: rgba(10, 16, 10, 0.55);
    --wash-text-shadow: 10, 16, 10;

    --chart-1: 64, 200, 64;
    --chart-2: 64, 180, 180;
    --chart-3: 200, 180, 40;
    --chart-4: 180, 100, 40;
    --chart-5: 200, 80, 80;
    --chart-6: 100, 160, 220;
    --chart-7: 220, 150, 40;
    --chart-8: 40, 200, 160;
    --chart-9: 140, 200, 100;
    --chart-10: 120, 140, 120;
    --chart-11: 180, 180, 60;

    --chart-text: #608860;
    --chart-grid: rgba(64, 200, 64, 0.08);

    --chart-nepe-s: 50%;
    --chart-nepe-l: 55%;
    --chart-nepe-l-border: 45%;
}