/**
 * THEME SYSTEM — TQQR (Make Room for Reading / The Queen's Reading Room)
 * ======================================================================
 *
 * Mirrors the structure of rfw-themes.css but maps each theme key to the
 * TQRR palette. TQQR pages author the same theme values (nature / sky /
 * sunset / mystical / ocean) as RFW pages — only the colours differ.
 *
 * Per-theme palette (primary = dark, primary-light = highlight):
 *   Nature   #002d37 / #46919b   — deep teal / light teal
 *   Sky      #005a7d / #7d93ae   — ink blue / slate blue
 *   Mystical #873246 / #b37c82   — wine / dusty pink
 *   Sunset   #c85f28 / #dca078   — burnt orange / sand
 *   Ocean    #46919b / #8bc4cb   — light teal / pale aqua
 *
 * White text is intended on any primary-coloured surface (buttons, top-nav,
 * footer). Body text remains dark for legibility on white overlays.
 */

/* Default — Nature */
:root {
    --primary: #002d37;
    --primary-light: #46919b;
    --primary-dark: #001e26;
    --secondary: #46919b;
    --accent: #46919b;
    --bg-tint: rgba(0, 45, 55, 0.08);
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --text-primary: #002d37;
    --text-secondary: #2f6b74; /* muted primary-teal — AA (~5.2:1) for subtitles/labels on the light content card; #46919b failed at ~3.1:1 */
    --text-body: #1f2d33;
    --primary-rgb: 0, 45, 55;
}

/* Nature Theme — Deep Teal (Explore) */
body.theme-nature {
    --primary: #002d37;
    --primary-light: #46919b;
    --primary-dark: #001e26;
    --secondary: #46919b;
    --accent: #46919b;
    --bg-tint: rgba(0, 45, 55, 0.08);
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --text-primary: #002d37;
    --text-secondary: #2f6b74; /* muted primary-teal — AA (~5.2:1) for subtitles/labels on the light content card; #46919b failed at ~3.1:1 */
    --text-body: #1f2d33;
    --primary-rgb: 0, 45, 55;
}

/* Sky Theme — Ink Blue (Understand) */
body.theme-sky {
    --primary: #005a7d;
    --primary-light: #7d93ae;
    --primary-dark: #003b54;
    --secondary: #7d93ae;
    --accent: #7d93ae;
    --bg-tint: rgba(0, 90, 125, 0.08);
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --text-primary: #005a7d;
    --text-secondary: #3a6280; /* muted primary-blue — AA (~5.4:1) for subtitles/labels on the light content card; #7d93ae failed at ~2.7:1 */
    --text-body: #1f2d33;
    --primary-rgb: 0, 90, 125;
}

/* Sunset Theme — Burnt Orange (Plan).
   Same pattern as the gold theme: text colours use the deeper --primary-dark
   so titles/subtitles meet WCAG AA on the cream content-overlay (#8d4419
   → 6.08:1). Brighter sunset stays on backgrounds, accents, and dot
   badges. */
body.theme-sunset {
    --primary: #c85f28;
    --primary-light: #dca078;
    --primary-dark: #8d4419;
    --secondary: #dca078;
    --accent: #dca078;
    --bg-tint: rgba(200, 95, 40, 0.08);
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --text-primary: #8d4419;
    --text-secondary: #8d4419;
    --text-body: #1f2d33;
    --primary-rgb: 200, 95, 40;
}

/* Mystical Theme — Wine (Play) */
body.theme-mystical {
    --primary: #873246;
    --primary-light: #b37c82;
    --primary-dark: #5c2130;
    --secondary: #b37c82;
    --accent: #b37c82;
    --bg-tint: rgba(135, 50, 70, 0.08);
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --text-primary: #873246;
    --text-secondary: #9c4258; /* muted primary-wine — AA (~5.4:1) for subtitles/labels on the light content card; #b37c82 failed at ~2.9:1 */
    --text-body: #1f2d33;
    --primary-rgb: 135, 50, 70;
}

/* Ocean Theme — Light Teal (Connect) */
body.theme-ocean {
    --primary: #46919b;
    --primary-light: #8bc4cb;
    --primary-dark: #2f6770;
    --secondary: #8bc4cb;
    --accent: #8bc4cb;
    --bg-tint: rgba(70, 145, 155, 0.08);
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --text-primary: #46919b;
    --text-secondary: #316d77; /* deepened teal — AA (~5:1) for subtitles/labels on the light content card; #8bc4cb failed at ~1.8:1 */
    --text-body: #1f2d33;
    --primary-rgb: 70, 145, 155;
}

/* Gold Theme — Warm Gold.
   Text colours are deliberately darker than --primary/--primary-light so titles
   and subtitles meet WCAG AA contrast against the cream content-overlay
   (#f1f0ec): #8a6535 → 4.57:1. The brighter #be8c4b stays on backgrounds,
   accents, and dot badges. */
body.theme-gold {
    --primary: #be8c4b;
    --primary-light: #d8b97f;
    --primary-dark: #8a6535;
    --secondary: #d8b97f;
    --accent: #d8b97f;
    --bg-tint: rgba(190, 140, 75, 0.08);
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --text-primary: #8a6535;
    --text-secondary: #8a6535;
    --text-body: #1f2d33;
    --primary-rgb: 190, 140, 75;
}

/* Direct Theme Text Colors (Legacy Support) */
.nature.text   { color: #002d37 !important; }
.sky.text      { color: #005a7d !important; }
.sunset.text   { color: #c85f28 !important; }
.mystical.text { color: #873246 !important; }
.ocean.text    { color: #46919b !important; }
.gold.text     { color: #be8c4b !important; }

/* ===========================================
   SCOPED THEME OVERRIDES
   Same API as rfw-themes.css — apply to any
   container to override the page theme for
   that element's subtree.
   =========================================== */

.force-theme-nature {
    --primary: #002d37;
    --primary-light: #46919b;
    --primary-dark: #001e26;
    --secondary: #46919b;
    --accent: #46919b;
    --bg-tint: rgba(0, 45, 55, 0.08);
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --text-primary: #002d37;
    --text-secondary: #2f6b74; /* muted primary-teal — AA (~5.2:1) for subtitles/labels on the light content card; #46919b failed at ~3.1:1 */
    --text-body: #1f2d33;
    --primary-rgb: 0, 45, 55;
}

.force-theme-sky {
    --primary: #005a7d;
    --primary-light: #7d93ae;
    --primary-dark: #003b54;
    --secondary: #7d93ae;
    --accent: #7d93ae;
    --bg-tint: rgba(0, 90, 125, 0.08);
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --text-primary: #005a7d;
    --text-secondary: #3a6280; /* muted primary-blue — AA (~5.4:1) for subtitles/labels on the light content card; #7d93ae failed at ~2.7:1 */
    --text-body: #1f2d33;
    --primary-rgb: 0, 90, 125;
}

.force-theme-sunset {
    --primary: #c85f28;
    --primary-light: #dca078;
    --primary-dark: #8d4419;
    --secondary: #dca078;
    --accent: #dca078;
    --bg-tint: rgba(200, 95, 40, 0.08);
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --text-primary: #8d4419;
    --text-secondary: #8d4419;
    --text-body: #1f2d33;
    --primary-rgb: 200, 95, 40;
}

.force-theme-mystical {
    --primary: #873246;
    --primary-light: #b37c82;
    --primary-dark: #5c2130;
    --secondary: #b37c82;
    --accent: #b37c82;
    --bg-tint: rgba(135, 50, 70, 0.08);
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --text-primary: #873246;
    --text-secondary: #9c4258; /* muted primary-wine — AA (~5.4:1) for subtitles/labels on the light content card; #b37c82 failed at ~2.9:1 */
    --text-body: #1f2d33;
    --primary-rgb: 135, 50, 70;
}

.force-theme-ocean {
    --primary: #46919b;
    --primary-light: #8bc4cb;
    --primary-dark: #2f6770;
    --secondary: #8bc4cb;
    --accent: #8bc4cb;
    --bg-tint: rgba(70, 145, 155, 0.08);
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --text-primary: #46919b;
    --text-secondary: #316d77; /* deepened teal — AA (~5:1) for subtitles/labels on the light content card; #8bc4cb failed at ~1.8:1 */
    --text-body: #1f2d33;
    --primary-rgb: 70, 145, 155;
}

.force-theme-gold {
    --primary: #be8c4b;
    --primary-light: #d8b97f;
    --primary-dark: #8a6535;
    --secondary: #d8b97f;
    --accent: #d8b97f;
    --bg-tint: rgba(190, 140, 75, 0.08);
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --text-primary: #8a6535;
    --text-secondary: #8a6535;
    --text-body: #1f2d33;
    --primary-rgb: 190, 140, 75;
}

/* ---------------------------------------------------------------------------
   Course Start Index element (rfwElement_CourseStartIndex) — per-theme accent.
   The element's view sets layout inline but reads its accent colour from these
   custom properties so each brand keeps its own palette (previously the view
   hardcoded these TQQR values inline, which leaked onto RFW).
     --csi-accent      strong: card left border + number-badge background
     --csi-accent-soft soft:   subtitle text + bottom-right arrow
   --------------------------------------------------------------------------- */
.csi-card--nature   { --csi-accent: #002d37; --csi-accent-soft: #46919b; }
.csi-card--ocean    { --csi-accent: #46919b; --csi-accent-soft: #46919b; }
.csi-card--sky      { --csi-accent: #005a7d; --csi-accent-soft: #005a7d; }
.csi-card--mystical { --csi-accent: #873246; --csi-accent-soft: #873246; }
.csi-card--sunset   { --csi-accent: #c85f28; --csi-accent-soft: #c85f28; }
.csi-card--gold     { --csi-accent: #be8c4b; --csi-accent-soft: #be8c4b; }