/* Theme CSS Variables - Centralized Theme Color Definitions */

/* Dark Theme (Default - Current Theme) */
:root[data-theme="dark"],
:root:not([data-theme]) {
    /* Background Colors */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3a3a3a;
    --bg-hover: #2a2a2a;

    /* Cloudbook PDF viewer "stage" (area behind the page) */
    --cloudbook-viewer-bg: #525659;

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-muted: #6c757d;

    /* Border Colors */
    --border-color: #3a3a3a;
    --border-light: #2a2a2a;

    /* Accent Colors — Button Palette dark gold (was neutral grey) */
    --accent-primary: #e0a536;
    --accent-secondary: #c08f2a;

    /* Semantic Colors — Button Palette dark families */
    --success-color: #54b06b;
    --warning-color: #ffc107;
    --error-color: #e0635a;
    --info-color: #52a3c8;

    /* Low-Contrast Semantic Colors for Results Page */
    --success-low-contrast: #66BB6A;
    --error-low-contrast: #EF9A9A;
    --success-bg-low-contrast: rgba(102, 187, 106, 0.3);
    --error-bg-low-contrast: rgba(239, 154, 154, 0.3);
    --success-text-low-contrast: #4CAF50;
    --error-text-low-contrast: #E57373;

    /* Logo Blue Colors for Test Mode Selection */
    --logo-blue: #4a90e2;
    --logo-blue-dark: #2c5282;

    /* IndianRed Color for Wrong Answer Highlighting */
    --indian-red: #CD5C5C;
    --indian-red-dark: #8B3A3A;

    /* Status Message Color (Yellow Ochre for Dark Theme) */
    --status-message-color: #CC7722;

    /* Surface Colors */
    --surface-color: #2d2d2d;
    --surface-hover: #3a3a3a;

    /* Table Colors */
    --table-lines: #3a3a3a;
    --table-striped: #2a2a2a;

    /* Input Colors */
    --input-bg: #1a1a1a;
    --input-border: #4a4a4a;
    --input-focus: #e0a536;

    /* Gray Scale */
    --gray-default: #4a4a4a;
    --gray-light: #6a6a6a;
    --gray-lighter: #8a8a8a;

    /* AppBar & Drawer */
    --appbar-bg: #1D1D1D;
    --appbar-text: #ffffff;
    --drawer-bg: #1A1A1A;
    --drawer-text: #ffffff;
    --drawer-header-bg: #212122;

    /* ---- Semantic button families (dark — from Button Palette.html .dark) ---- */
    /* New additive tokens; do NOT alter existing dark appearance. */
    --primary-color: #e0a536;  --primary-hover: #f0b94e;  --primary-soft: rgba(224,165,54,.16); --primary-ink: #e6b052; --primary-ring: rgba(224,165,54,.40);
    --success-button: #54b06b; --success-hover: #64c07b;  --success-soft-btn: rgba(84,176,107,.16); --success-ink: #76c78c; --success-ring: rgba(84,176,107,.38);
    --info-button: #52a3c8;    --info-hover: #68b4d6;     --info-soft-btn: rgba(82,163,200,.16);  --info-ink: #7cbfdd;   --info-ring: rgba(82,163,200,.38);
    --danger-button: #e0635a;  --danger-hover: #ec766e;   --danger-soft-btn: rgba(224,99,90,.16); --danger-ink: #ef8079; --danger-ring: rgba(224,99,90,.38);

    /* ---- Cool Linen accent/link/pill/warn/ok extras (dark variants) ---- */
    --link-color: #6db3e8;
    --pill-bg: rgba(95,79,147,.22); --pill-ink: #c3b5ef;
    --warn-bg: rgba(207,148,28,.15); --warn-line: rgba(234,208,138,.30); --warn-bar: #cf941c;
    --ok-color: #66BB6A; --ok-soft: rgba(58,122,74,.18);
    --gold-soft: rgba(224,165,54,.14); --gold-line: rgba(224,165,54,.30);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.40);
    --shadow-card: 0 1px 2px rgba(0,0,0,.40), 0 8px 24px rgba(0,0,0,.30);

    /* App fonts (dark keeps existing — used by chrome that opts into the token) */
    --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-brand: 'Roboto Condensed', sans-serif;
}

/* ============================================================= */
/* Light Theme — "Cool Linen" palette                            */
/* Source: Claude Design project 62bf1774-3b04-4d46-9d3a-38eb06bc60c2 */
/*   - Chat Answer.html  (.pal-linen surfaces/text/accent)       */
/*   - Button Palette.html (semantic button families)            */
/* ============================================================= */
:root[data-theme="light"] {
    /* Background Colors — linen stone surfaces */
    --bg-primary: #f4f4f1;   /* main reading surface (--bg) */
    --bg-secondary: #fafaf8; /* lighter secondary surface (--rail) */
    --bg-tertiary: #e8e8e4;  /* deeper outer shell (--page) */
    --bg-hover: #ebebe6;     /* subtle neutral hover (visible on linen) */

    /* Cloudbook PDF viewer "stage" — soft linen grey, a touch darker than the
       white page so the page edges read clearly. */
    --cloudbook-viewer-bg: #dbdad3;

    /* Text Colors — cool stone ink */
    --text-primary: #272a2c;   /* --ink */
    --text-secondary: #565b5e; /* --ink-soft */
    --text-muted: #969b9d;     /* --ink-dim */

    /* Border Colors */
    --border-color: #e7e7e2;  /* --card-line */
    --border-light: #efefec;  /* slightly lighter hairline */

    /* Accent Colors — brand gold (was neutral grey) */
    --accent-primary: #a9761f;   /* Button Palette --primary base */
    --accent-secondary: #936414; /* Button Palette --primary hover */

    /* Semantic Colors — Cool Linen / Button Palette families */
    --success-color: #3a7a4a;  /* forest green */
    --warning-color: #b9810f;  /* amber (--warn) */
    --error-color: #be4f45;    /* clay red (--danger) */
    --info-color: #2f6f8f;     /* teal-blue */

    /* Low-Contrast Semantic Colors for Results Page */
    --success-low-contrast: #d8e8dc;
    --error-low-contrast: #f3dcd9;
    --success-bg-low-contrast: rgba(58, 122, 74, 0.13);
    --error-bg-low-contrast: rgba(190, 79, 69, 0.13);
    --success-text-low-contrast: #2f6340;
    --error-text-low-contrast: #a8463e;

    /* Logo Blue Colors for Test Mode Selection — aligned to info family */
    --logo-blue: #2d6cb3;
    --logo-blue-dark: #285f7a;

    /* IndianRed Color for Wrong Answer Highlighting — aligned to danger */
    --indian-red: #be4f45;
    --indian-red-dark: #a8463e;

    /* Status Message Color (Green for Light Theme) */
    --status-message-color: var(--success-color);

    /* Surface Colors — white cards on linen */
    --surface-color: #ffffff;  /* --card */
    --surface-hover: #f0efe9;

    /* Table Colors */
    --table-lines: #e7e7e2;
    --table-striped: #fafaf8;

    /* Input Colors */
    --input-bg: #ffffff;
    --input-border: #d4d4ce;
    --input-focus: #a9761f;  /* gold focus ring */

    /* Gray Scale (cool stone — kept dark enough for icon visibility) */
    --gray-default: #7e827f;
    --gray-light: #9ca09d;
    --gray-lighter: #bdc1be;

    /* AppBar & Drawer — linen rail */
    --appbar-bg: #fafaf8;
    --appbar-text: #272a2c;
    --drawer-bg: #fafaf8;
    --drawer-text: #272a2c;
    --drawer-header-bg: #f4f4f1;

    /* ---- Semantic button families (light — from Button Palette.html) ---- */
    --primary-color: #a9761f;  --primary-hover: #936414;  --primary-soft: rgba(185,132,42,.13); --primary-ink: #8a6320; --primary-ring: rgba(185,132,42,.36);
    --success-button: #3a7a4a; --success-hover: #316b3f;  --success-soft-btn: rgba(58,122,74,.13);  --success-ink: #2f6340; --success-ring: rgba(58,122,74,.34);
    --info-button: #2f6f8f;    --info-hover: #285f7a;     --info-soft-btn: rgba(47,111,143,.13);   --info-ink: #2a6280;   --info-ring: rgba(47,111,143,.34);
    --danger-button: #be4f45;  --danger-hover: #a8463e;   --danger-soft-btn: rgba(190,79,69,.13);  --danger-ink: #a8463e; --danger-ring: rgba(190,79,69,.34);

    /* ---- Cool Linen accent/link/pill/warn/ok extras (from Chat Answer.html) ---- */
    --link-color: #2d6cb3;   /* calm blue source links */
    --pill-bg: #e8e4f1; --pill-ink: #5f4f93;          /* GPF-style token pill */
    --warn-bg: #fcf3dc; --warn-line: #ead08a; --warn-bar: #cf941c;
    --ok-color: #3a7a52; --ok-soft: #e5efe6;          /* credit "ok" chip */
    --gold-soft: rgba(176,125,36,.11); --gold-line: rgba(176,125,36,.30);
    --shadow-sm: 0 1px 2px rgba(40,45,50,.05);
    --shadow-card: 0 1px 2px rgba(40,45,50,.05), 0 8px 24px rgba(40,50,60,.06);

    /* Cool Linen app fonts — Cabin for body & brand chrome (headings use Fraunces) */
    --font-body: 'Cabin', system-ui, sans-serif;
    --font-brand: 'Cabin', system-ui, sans-serif;
}

/* ============================================================= */
/* Light-family palette VARIANTS (data-palette)                  */
/* Base [data-theme="light"] (= Cool Linen / linen) stays the    */
/* default; these blocks override only the palette-specific vars */
/* plus the key --mud-palette-* MudBlazor reads. Source: Claude  */
/* Design Chat Answer.html (default Warm Paper, .pal-sand).      */
/* ============================================================= */

/* ----- Warm Paper ----- */
:root[data-theme="light"][data-palette="warmpaper"] {
    --bg-primary: #f6f1e7;
    --bg-secondary: #fbf7ee;
    --bg-tertiary: #efe8db;
    --bg-hover: #ece4d3;
    --cloudbook-viewer-bg: #e2dccc;
    --surface-color: #ffffff;
    --surface-hover: #f3ecdd;
    --border-color: #e9dfcc;
    --border-light: #f0e8d8;
    --text-primary: #2c2620;
    --text-secondary: #5f574a;
    --text-muted: #9a8f7d;
    --accent-primary: #b9842a;
    --accent-secondary: #9c6f1e;
    --link-color: #2f6f8f;
    --warning-color: #c98a12;
    --warn-bg: #fbf1d9; --warn-line: #e8c878; --warn-bar: #d99a1f;
    --success-color: #3f7d4e; --ok-color: #3f7d4e; --ok-soft: #e7f0e3;
    --pill-bg: #ece4f3; --pill-ink: #6b4d97;
    --gold-soft: rgba(185,132,42,.12); --gold-line: rgba(185,132,42,.34);
    --input-focus: #b9842a;
    --table-lines: #e9dfcc; --table-striped: #fbf7ee;
    --appbar-bg: #fbf7ee; --drawer-bg: #fbf7ee; --drawer-header-bg: #f6f1e7;
    --primary-color: #b9842a; --primary-hover: #9c6f1e; --primary-soft: rgba(185,132,42,.13); --primary-ink: #8a6320; --primary-ring: rgba(185,132,42,.36);
    /* MudBlazor */
    --mud-palette-primary: #b9842a;
    --mud-palette-secondary: #9c6f1e;
    --mud-palette-background: #f6f1e7;
    --mud-palette-background-gray: #efe8db;
    --mud-palette-surface: #ffffff;
    --mud-palette-appbar-background: #fbf7ee;
    --mud-palette-drawer-background: #fbf7ee;
    --mud-palette-text-primary: #2c2620;
    --mud-palette-text-secondary: #5f574a;
    --mud-palette-action-default: #5f574a;
    --mud-palette-lines-default: #e9dfcc;
    --mud-palette-lines-inputs: #d8cdb6;
    --mud-palette-table-lines: #e9dfcc;
    --mud-palette-divider: #e9dfcc;
    --mud-palette-warning: #c98a12;
    --mud-palette-success: #3f7d4e;
}

/* ----- Sand & Ink ----- */
:root[data-theme="light"][data-palette="sandink"] {
    --bg-primary: #efe6d4;
    --bg-secondary: #f6efe1;
    --bg-tertiary: #e4d9c4;
    --bg-hover: #e2d7c0;
    --cloudbook-viewer-bg: #d8ccb3;
    --surface-color: #fffdf8;
    --surface-hover: #f3ead7;
    --border-color: #e2d5bd;
    --border-light: #ebe0cb;
    --text-primary: #322817;
    --text-secondary: #6a5c44;
    --text-muted: #a08f72;
    --accent-primary: #a8701a;
    --accent-secondary: #8c5c12;
    --link-color: #37708a;
    --warning-color: #bc7d0c;
    --warn-bg: #f8edcf; --warn-line: #e3c477; --warn-bar: #cc8d14;
    --success-color: #477a3f; --ok-color: #477a3f; --ok-soft: #e7efdf;
    --pill-bg: #ece2ef; --pill-ink: #6a4d8f;
    --gold-soft: rgba(168,112,26,.13); --gold-line: rgba(168,112,26,.36);
    --input-focus: #a8701a;
    --table-lines: #e2d5bd; --table-striped: #f6efe1;
    --appbar-bg: #f6efe1; --drawer-bg: #f6efe1; --drawer-header-bg: #efe6d4;
    --primary-color: #a8701a; --primary-hover: #8c5c12; --primary-soft: rgba(168,112,26,.13); --primary-ink: #7a5210; --primary-ring: rgba(168,112,26,.36);
    /* MudBlazor */
    --mud-palette-primary: #a8701a;
    --mud-palette-secondary: #8c5c12;
    --mud-palette-background: #efe6d4;
    --mud-palette-background-gray: #e4d9c4;
    --mud-palette-surface: #fffdf8;
    --mud-palette-appbar-background: #f6efe1;
    --mud-palette-drawer-background: #f6efe1;
    --mud-palette-text-primary: #322817;
    --mud-palette-text-secondary: #6a5c44;
    --mud-palette-action-default: #6a5c44;
    --mud-palette-lines-default: #e2d5bd;
    --mud-palette-lines-inputs: #d2c3a6;
    --mud-palette-table-lines: #e2d5bd;
    --mud-palette-divider: #e2d5bd;
    --mud-palette-warning: #bc7d0c;
    --mud-palette-success: #477a3f;
}

/* ============================================================= */
/* Dark-family palette VARIANTS (data-palette)                   */
/* Base [data-theme="dark"] stays the default Dark; these blocks */
/* override palette-specific vars + key --mud-palette-*.         */
/* Source: Claude Design Chat Answer.html (.dark-oak/slate/espresso). */
/* ============================================================= */

/* ----- Midnight Oak (warm charcoal + gold) ----- */
:root[data-theme="dark"][data-palette="oak"] {
    --bg-primary: #16120f;
    --bg-secondary: #1b1713;
    --bg-tertiary: #0d0b09;
    --bg-hover: #221d17;
    --cloudbook-viewer-bg: #3a322a;
    --surface-color: #211c17;
    --surface-hover: #2a241c;
    --border-color: #322a20;
    --border-light: #2c251d;
    --text-primary: #f0eae0;
    --text-secondary: #b3a899;
    --text-muted: #7d7264;
    --accent-primary: #e0a536;
    --accent-secondary: #f0b94e;
    --link-color: #5bb0d6;
    --info-color: #5bb0d6;
    --warning-color: #e6b34a;
    --warn-bg: #2e2413; --warn-line: #5a4622; --warn-bar: #d99a1f;
    --success-color: #62b97a; --ok-color: #62b97a; --ok-soft: #1d2c1f;
    --pill-bg: #332a44; --pill-ink: #c4abe6;
    --gold-soft: rgba(224,165,54,.15); --gold-line: rgba(224,165,54,.30);
    --input-focus: #e0a536; --input-bg: #16120f; --input-border: #322a20;
    --table-lines: #322a20; --table-striped: #1b1713;
    --appbar-bg: #1b1713; --appbar-text: #f0eae0;
    --drawer-bg: #1b1713; --drawer-text: #f0eae0; --drawer-header-bg: #16120f;
    --primary-color: #e0a536; --primary-hover: #f0b94e; --primary-soft: rgba(224,165,54,.16); --primary-ink: #e6b052; --primary-ring: rgba(224,165,54,.40);
    --mud-palette-primary: #e0a536;
    --mud-palette-secondary: #f0b94e;
    --mud-palette-background: #16120f;
    --mud-palette-background-gray: #0d0b09;
    --mud-palette-surface: #211c17;
    --mud-palette-appbar-background: #1b1713;
    --mud-palette-drawer-background: #1b1713;
    --mud-palette-text-primary: #f0eae0;
    --mud-palette-text-secondary: #b3a899;
    --mud-palette-action-default: #f0eae0;
    --mud-palette-lines-default: #322a20;
    --mud-palette-lines-inputs: #3a3026;
    --mud-palette-table-lines: #322a20;
    --mud-palette-divider: #322a20;
}

/* ----- Slate (cool graphite + blue links) ----- */
:root[data-theme="dark"][data-palette="slate"] {
    --bg-primary: #15181b;
    --bg-secondary: #1a1e22;
    --bg-tertiary: #0c0e10;
    --bg-hover: #20262b;
    --cloudbook-viewer-bg: #353c42;
    --surface-color: #1f2429;
    --surface-hover: #283037;
    --border-color: #2f363d;
    --border-light: #2a3036;
    --text-primary: #e9edf0;
    --text-secondary: #a4adb5;
    --text-muted: #6f7980;
    --accent-primary: #5aa9ec;   /* Slate primary = logo-blue family (was gold) */
    --accent-secondary: #4a90e2; /* logo blue */
    --link-color: #5aa9ec;
    --info-color: #5aa9ec;
    --warning-color: #e3b24f;
    --warn-bg: #2a2616; --warn-line: #524a26; --warn-bar: #d29a22;
    --success-color: #5cb878; --ok-color: #5cb878; --ok-soft: #192620;
    --pill-bg: #2b3147; --pill-ink: #a9b6ec;
    --gold-soft: rgba(90,169,236,.14); --gold-line: rgba(90,169,236,.28);
    --input-focus: #5aa9ec; --input-bg: #15181b; --input-border: #2f363d;
    --table-lines: #2f363d; --table-striped: #1a1e22;
    --appbar-bg: #1a1e22; --appbar-text: #e9edf0;
    --drawer-bg: #1a1e22; --drawer-text: #e9edf0; --drawer-header-bg: #15181b;
    --primary-color: #5aa9ec; --primary-hover: #74b9f0; --primary-soft: rgba(90,169,236,.16); --primary-ink: #7cc0f2; --primary-ring: rgba(90,169,236,.40);
    --mud-palette-primary: #5aa9ec;
    --mud-palette-secondary: #4a90e2;
    --mud-palette-background: #15181b;
    --mud-palette-background-gray: #0c0e10;
    --mud-palette-surface: #1f2429;
    --mud-palette-appbar-background: #1a1e22;
    --mud-palette-drawer-background: #1a1e22;
    --mud-palette-text-primary: #e9edf0;
    --mud-palette-text-secondary: #a4adb5;
    --mud-palette-action-default: #e9edf0;
    --mud-palette-lines-default: #2f363d;
    --mud-palette-lines-inputs: #373f47;
    --mud-palette-table-lines: #2f363d;
    --mud-palette-divider: #2f363d;
}

/* ----- Espresso (deep brown + amber) ----- */
:root[data-theme="dark"][data-palette="espresso"] {
    --bg-primary: #17110c;
    --bg-secondary: #1d160f;
    --bg-tertiary: #0c0907;
    --bg-hover: #241b13;
    --cloudbook-viewer-bg: #3a2e22;
    --surface-color: #241b12;
    --surface-hover: #2e2318;
    --border-color: #37291b;
    --border-light: #30251a;
    --text-primary: #f1e8da;
    --text-secondary: #b6a78f;
    --text-muted: #80715c;
    --accent-primary: #e2a838;
    --accent-secondary: #f2bd52;
    --link-color: #5fb3c9;
    --info-color: #5fb3c9;
    --warning-color: #e8b54e;
    --warn-bg: #2f2410; --warn-line: #5d4820; --warn-bar: #dca01f;
    --success-color: #69bd7e; --ok-color: #69bd7e; --ok-soft: #1f2b1c;
    --pill-bg: #352843; --pill-ink: #c9aee8;
    --gold-soft: rgba(226,168,56,.16); --gold-line: rgba(226,168,56,.32);
    --input-focus: #e2a838; --input-bg: #17110c; --input-border: #37291b;
    --table-lines: #37291b; --table-striped: #1d160f;
    --appbar-bg: #1d160f; --appbar-text: #f1e8da;
    --drawer-bg: #1d160f; --drawer-text: #f1e8da; --drawer-header-bg: #17110c;
    --primary-color: #e2a838; --primary-hover: #f2bd52; --primary-soft: rgba(226,168,56,.16); --primary-ink: #e8b052; --primary-ring: rgba(226,168,56,.40);
    --mud-palette-primary: #e2a838;
    --mud-palette-secondary: #f2bd52;
    --mud-palette-background: #17110c;
    --mud-palette-background-gray: #0c0907;
    --mud-palette-surface: #241b12;
    --mud-palette-appbar-background: #1d160f;
    --mud-palette-drawer-background: #1d160f;
    --mud-palette-text-primary: #f1e8da;
    --mud-palette-text-secondary: #b6a78f;
    --mud-palette-action-default: #f1e8da;
    --mud-palette-lines-default: #37291b;
    --mud-palette-lines-inputs: #3f3020;
    --mud-palette-table-lines: #37291b;
    --mud-palette-divider: #37291b;
}

/* NOTE: a global `* { transition: background-color/color/border-color 2s }` used to live
   here. It faded EVERY colour change across the whole app over 2s — read as an unwanted
   "text fade-in" on every render. Theme switching already ran instantly (it disabled this
   rule), so the transition served no purpose and has been removed. Component-specific
   transitions are defined on their own selectors and are unaffected. */

/* Disable transitions for theme switching to prevent flash */
body.theme-switching * {
    transition: none !important;
}