/* ==========================================================================
   COLORS — every color the site uses, in one place
   ==========================================================================
   Student and teacher pages both use these. To change a color, change it
   here and every page that uses it changes too.

   TRYING A DIFFERENT THEME
   Each theme below has a name, like data-theme="rose-garden". To switch,
   open templates/base.html and change the name in this line near the top:

       <html lang="en" data-theme="field-path">

   Then save and reload the page (Ctrl+F5). The theme names are:

       navy-teal            Navy & Teal
       sage-terracotta      Sage & Terracotta
       fashion              Fashion
       cobalt-coral         Cobalt & Coral
       dune-sea             Dune & Sea
       purple-beach-house   Purple Beach House
       turquoise-deck       Turquoise Deck
       morning-glory        Morning Glory
       rose-garden          Rose Garden
       wildflower-meadow    Wildflower Meadow
       field-path           Field Path
       wetland-meadow       Wetland Meadow
       slate-stone          Slate & Stone
       azalea-spring        Azalea Spring
       original-blue        Original Blue (the site's first colors)

   All but Original Blue come from the Slide Color Themes page.

   Field Path is also the backup: if the name in base.html is missing or
   spelled wrong, the site uses Field Path.

   ADDING A THEME: copy one whole theme block, give it a new name, change
   the colors, and use the new name in base.html.

   The logo image doesn't follow these colors.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FIELD PATH (from the Slide Color Themes page)
   ":root" means it's also the backup theme.
   -------------------------------------------------------------------------- */
:root,
[data-theme="field-path"] {
    /* Page and surfaces */
    --color-bg: #FBFAF6;              /* page background — warm white */
    --color-white: #FFFFFF;           /* cards, modals, dropdowns */
    --color-surface-alt: #F4F2EB;     /* hover rows, answer boxes, plain buttons */
    --color-panel: #E3F2F7;           /* nav bar, table headers, feedback bubble — pale sky */
    --color-panel-line: #C9E1EA;      /* lines on the panels */

    /* Main colors */
    --color-primary: #33401A;         /* buttons, page titles, active tab — pine */
    --color-primary-light: #4B5E27;   /* button hover, picker borders */
    --color-primary-dark: #232D10;    /* the darker .button style */
    --color-link: #6A5524;            /* links — dark straw */
    --color-accent: #7B5E33;          /* pinned notes, feedback icon — dirt path */
    --color-accent-dark: #5C4524;     /* outline and small text with the accent */
    --color-highlight-bg: #F6EBDF;    /* "has feedback" button — pale tan */

    /* Text */
    --color-text: #262A1C;            /* body text — dark olive */
    --color-muted: #6B6F5E;           /* small grey notes, dates, placeholders */

    /* Lines and plain buttons */
    --color-border: #D3CFC2;          /* input boxes, buttons, cards */
    --color-border-light: #E2DED3;    /* lighter card outlines, tab line */
    --color-divider: #EEEBE3;         /* faint lines between sections and table rows */
    --color-btn-secondary: #E4E0D4;   /* grey buttons: Close, Open Only */
}

/* --------------------------------------------------------------------------
   SLATE & STONE — calm grey-blue
   -------------------------------------------------------------------------- */
[data-theme="slate-stone"] {
    --color-bg: #FAFAF9;              /* white siding */
    --color-white: #FFFFFF;
    --color-surface-alt: #F2F1F0;
    --color-panel: #E7EDF3;           /* pale wrap blue */
    --color-panel-line: #CED6DF;

    --color-primary: #3F5670;         /* slate blue */
    --color-primary-light: #62748A;
    --color-primary-dark: #2C3C4E;
    --color-link: #4A6480;
    --color-accent: #5E5046;          /* warm brown */
    --color-accent-dark: #42382F;
    --color-highlight-bg: #EEECEA;    /* pale stone */

    --color-text: #262220;            /* dark scale */
    --color-muted: #72706E;

    --color-border: #D4D3D2;
    --color-border-light: #E3E2E1;
    --color-divider: #EDEDEC;
    --color-btn-secondary: #E1E0DF;
}

/* --------------------------------------------------------------------------
   TURQUOISE DECK — ocean blue and turquoise
   -------------------------------------------------------------------------- */
[data-theme="turquoise-deck"] {
    --color-bg: #FAFCFD;              /* ice */
    --color-white: #FFFFFF;
    --color-surface-alt: #F1F4F5;
    --color-panel: #E6EFF8;           /* hazy sky */
    --color-panel-line: #CAD9E8;

    --color-primary: #2E5A8F;         /* ocean blue */
    --color-primary-light: #5478A3;
    --color-primary-dark: #203F64;
    --color-link: #036C78;            /* deep turquoise */
    --color-accent: #04818F;          /* turquoise */
    --color-accent-dark: #035A64;
    --color-highlight-bg: #DDF3F6;    /* pale turquoise */

    --color-text: #1F2A33;            /* dark slate */
    --color-muted: #687076;

    --color-border: #D3D6D9;
    --color-border-light: #E2E5E7;
    --color-divider: #EDEFF1;
    --color-btn-secondary: #E0E3E5;
}

/* --------------------------------------------------------------------------
   ROSE GARDEN — rose leaf green and deep rose
   -------------------------------------------------------------------------- */
[data-theme="rose-garden"] {
    --color-bg: #FCFBF8;              /* warm white */
    --color-white: #FFFFFF;
    --color-surface-alt: #F3F3EF;
    --color-panel: #EAF1E3;           /* pale leaf */
    --color-panel-line: #CED9C5;

    --color-primary: #2E5418;         /* rose leaf */
    --color-primary-light: #547342;
    --color-primary-dark: #203B11;
    --color-link: #A3184F;            /* deep rose */
    --color-accent: #D2336F;          /* rose pink */
    --color-accent-dark: #93244E;
    --color-highlight-bg: #FCE4EE;    /* blush */

    --color-text: #1F2A1C;            /* dark green-grey */
    --color-muted: #6F756B;

    --color-border: #D4D5D0;
    --color-border-light: #E4E4E0;
    --color-divider: #EFEEEB;
    --color-btn-secondary: #E1E2DE;
}

/* --------------------------------------------------------------------------
   ORIGINAL BLUE — the site's first colors
   -------------------------------------------------------------------------- */
[data-theme="original-blue"] {
    --color-bg: #f7f9fc;
    --color-white: #ffffff;
    --color-surface-alt: #f8f8f8;
    --color-panel: #e8f0fe;
    --color-panel-line: #d3def5;

    --color-primary: #2a4b8d;
    --color-primary-light: #3f63b3;
    --color-primary-dark: #2c3e50;
    --color-link: #0066cc;
    --color-accent: #f4b400;
    --color-accent-dark: #b88700;
    --color-highlight-bg: #fff4cc;

    --color-text: #333333;
    --color-muted: #777777;

    --color-border: #cccccc;
    --color-border-light: #dddddd;
    --color-divider: #eeeeee;
    --color-btn-secondary: #dddddd;
}

/* --------------------------------------------------------------------------
   NAVY & TEAL — from the Slide Color Themes page (Business English slides)
   -------------------------------------------------------------------------- */
[data-theme="navy-teal"] {
    --color-bg: #F6F7F9;              /* off-white */
    --color-white: #FFFFFF;
    --color-surface-alt: #EDEFF1;
    --color-panel: #E1EAF4;           /* blue-grey */
    --color-panel-line: #C2CDDB;

    --color-primary: #15294B;         /* navy */
    --color-primary-light: #3F506B;
    --color-primary-dark: #0F1D34;
    --color-link: #1E6F78;            /* teal */
    --color-accent: #1E6F78;          /* teal */
    --color-accent-dark: #154E54;
    --color-highlight-bg: #FBF0DC;    /* warm cream */

    --color-text: #1F2933;            /* charcoal */
    --color-muted: #6A7178;

    --color-border: #CFD2D5;
    --color-border-light: #DEE0E3;
    --color-divider: #E9EBED;
    --color-btn-secondary: #DCDEE1;
}

/* --------------------------------------------------------------------------
   SAGE & TERRACOTTA — from the Slide Color Themes page (reading and listening slides)
   -------------------------------------------------------------------------- */
[data-theme="sage-terracotta"] {
    --color-bg: #FAF8F3;              /* warm off-white */
    --color-white: #FFFFFF;
    --color-surface-alt: #F1F0EB;
    --color-panel: #E4EDE5;           /* sage */
    --color-panel-line: #C6D3CA;

    --color-primary: #1F3D33;         /* deep green */
    --color-primary-light: #476058;
    --color-primary-dark: #162B24;
    --color-link: #3E7A63;            /* green */
    --color-accent: #D97A3E;          /* terracotta pot */
    --color-accent-dark: #98552B;
    --color-highlight-bg: #F5E6CC;    /* sand */

    --color-text: #23302B;            /* dark green-grey */
    --color-muted: #69716C;

    --color-border: #D3D4CF;
    --color-border-light: #E2E2DD;
    --color-divider: #EDECE7;
    --color-btn-secondary: #E0E0DB;
}

/* --------------------------------------------------------------------------
   FASHION — from the Slide Color Themes page (Fashion course slides)
   -------------------------------------------------------------------------- */
[data-theme="fashion"] {
    --color-bg: #FBF6EE;              /* cream */
    --color-white: #FFFFFF;
    --color-surface-alt: #F2EEE7;
    --color-panel: #DDECF4;           /* pale sky blue */
    --color-panel-line: #C0D3DC;

    --color-primary: #1E4652;         /* dark navy-teal */
    --color-primary-light: #466771;
    --color-primary-dark: #153139;
    --color-link: #26797B;            /* teal */
    --color-accent: #E8735A;          /* coral */
    --color-accent-dark: #A2503F;
    --color-highlight-bg: #FADDD8;    /* soft pink */

    --color-text: #263238;            /* dark slate */
    --color-muted: #6A6F70;

    --color-border: #D5D3CD;
    --color-border-light: #E4E0DA;
    --color-divider: #EEEAE3;
    --color-btn-secondary: #E1DED8;
}

/* --------------------------------------------------------------------------
   COBALT & CORAL — from the Slide Color Themes page (Water Bottle and UX/UI slides)
   -------------------------------------------------------------------------- */
[data-theme="cobalt-coral"] {
    --color-bg: #FBFCFE;              /* near-white */
    --color-white: #FFFFFF;
    --color-surface-alt: #F2F3F6;
    --color-panel: #DDF2F6;           /* light aqua */
    --color-panel-line: #BFD8EF;

    --color-primary: #1747C9;         /* cobalt */
    --color-primary-light: #4168D3;
    --color-primary-dark: #10328D;
    --color-link: #0B7A8C;            /* deep aqua */
    --color-accent: #FF6B5B;          /* coral */
    --color-accent-dark: #B24B40;
    --color-highlight-bg: #FFF2C2;    /* pale sunny yellow */

    --color-text: #1C2433;            /* dark navy */
    --color-muted: #6C727C;

    --color-border: #D3D5D9;
    --color-border-light: #E2E4E8;
    --color-divider: #EEEFF2;
    --color-btn-secondary: #E0E2E6;
}

/* --------------------------------------------------------------------------
   DUNE & SEA — from the Slide Color Themes page (beach photos)
   -------------------------------------------------------------------------- */
[data-theme="dune-sea"] {
    --color-bg: #F8F8FB;              /* sea foam */
    --color-white: #FFFFFF;
    --color-surface-alt: #EFF0F3;
    --color-panel: #DDEEFC;           /* pale summer sky */
    --color-panel-line: #C3D7E8;

    --color-primary: #315279;         /* deep ocean */
    --color-primary-light: #567191;
    --color-primary-dark: #223955;
    --color-link: #5B6A1E;            /* dark dune grass */
    --color-accent: #6E7A2A;          /* dune grass */
    --color-accent-dark: #4D551D;
    --color-highlight-bg: #F4E7D4;    /* warm sand */

    --color-text: #1E2A36;            /* dark navy */
    --color-muted: #6A727A;

    --color-border: #D1D3D8;
    --color-border-light: #E0E1E5;
    --color-divider: #EBECEF;
    --color-btn-secondary: #DEDFE3;
}

/* --------------------------------------------------------------------------
   PURPLE BEACH HOUSE — from the Slide Color Themes page (beach photos)
   -------------------------------------------------------------------------- */
[data-theme="purple-beach-house"] {
    --color-bg: #FBFAFD;              /* white rail */
    --color-white: #FFFFFF;
    --color-surface-alt: #F2F1F5;
    --color-panel: #E3EEFB;           /* pale sky */
    --color-panel-line: #CCD4E6;

    --color-primary: #493F71;         /* beach-house violet */
    --color-primary-light: #6A628B;
    --color-primary-dark: #332C4F;
    --color-link: #3F5A2C;            /* palm green */
    --color-accent: #AC2A4C;          /* raspberry */
    --color-accent-dark: #781D35;
    --color-highlight-bg: #F6ECDF;    /* pale sand */

    --color-text: #25223A;            /* deep violet-grey */
    --color-muted: #727080;

    --color-border: #D4D3DA;
    --color-border-light: #E3E2E8;
    --color-divider: #EEEDF1;
    --color-btn-secondary: #E1E0E6;
}

/* --------------------------------------------------------------------------
   MORNING GLORY — from the Slide Color Themes page (garden photos)
   -------------------------------------------------------------------------- */
[data-theme="morning-glory"] {
    --color-bg: #FBFAFD;              /* near-white */
    --color-white: #FFFFFF;
    --color-surface-alt: #F2F1F5;
    --color-panel: #EFE7FB;           /* pale lavender */
    --color-panel-line: #D9CBE9;

    --color-primary: #5B2A86;         /* deep purple */
    --color-primary-light: #79509C;
    --color-primary-dark: #401D5E;
    --color-link: #3F5A14;            /* leaf green */
    --color-accent: #7A45C9;          /* glory violet */
    --color-accent-dark: #55308D;
    --color-highlight-bg: #EAF0DF;    /* pale sage */

    --color-text: #241E30;            /* dark violet-grey */
    --color-muted: #716D7A;

    --color-border: #D4D2D8;
    --color-border-light: #E3E2E6;
    --color-divider: #EEEDF1;
    --color-btn-secondary: #E1E0E4;
}

/* --------------------------------------------------------------------------
   WILDFLOWER MEADOW — from the Slide Color Themes page (garden photos)
   -------------------------------------------------------------------------- */
[data-theme="wildflower-meadow"] {
    --color-bg: #FBFBFC;              /* near-white */
    --color-white: #FFFFFF;
    --color-surface-alt: #F2F2F4;
    --color-panel: #E8EBF8;           /* pale periwinkle */
    --color-panel-line: #D0D0E5;

    --color-primary: #4A3A7A;         /* deep purple */
    --color-primary-light: #6B5D92;
    --color-primary-dark: #342955;
    --color-link: #4B6B2E;            /* meadow green */
    --color-accent: #4E7A3A;          /* meadow green */
    --color-accent-dark: #375529;
    --color-highlight-bg: #F2EDE2;    /* pale straw */

    --color-text: #24243A;            /* dark indigo-grey */
    --color-muted: #717180;

    --color-border: #D4D4D9;
    --color-border-light: #E3E3E7;
    --color-divider: #EEEEF0;
    --color-btn-secondary: #E1E1E5;
}

/* --------------------------------------------------------------------------
   WETLAND MEADOW — from the Slide Color Themes page (meadow photo)
   -------------------------------------------------------------------------- */
[data-theme="wetland-meadow"] {
    --color-bg: #FAFCF8;              /* near-white */
    --color-white: #FFFFFF;
    --color-surface-alt: #F1F3EF;
    --color-panel: #E3F0FC;           /* pale rain sky */
    --color-panel-line: #C8D5DC;

    --color-primary: #2D3F27;         /* pine */
    --color-primary-light: #53624E;
    --color-primary-dark: #1F2C1B;
    --color-link: #55702C;            /* fresh grass */
    --color-accent: #4F6E2A;          /* deep grass */
    --color-accent-dark: #374D1D;
    --color-highlight-bg: #F1EFE2;    /* pale straw */

    --color-text: #1E261A;            /* dark green */
    --color-muted: #6D736A;

    --color-border: #D2D5D0;
    --color-border-light: #E2E4E0;
    --color-divider: #EDEFEB;
    --color-btn-secondary: #E0E2DD;
}

/* --------------------------------------------------------------------------
   AZALEA SPRING — from the Slide Color Themes page (spring yard photos)
   -------------------------------------------------------------------------- */
[data-theme="azalea-spring"] {
    --color-bg: #FCFBFA;              /* warm white */
    --color-white: #FFFFFF;
    --color-surface-alt: #F4F2F2;
    --color-panel: #E4F0FA;           /* pale spring sky */
    --color-panel-line: #D4D3E2;

    --color-primary: #7A2E58;         /* deep azalea */
    --color-primary-light: #925476;
    --color-primary-dark: #55203E;
    --color-link: #3F6127;            /* leaf green */
    --color-accent: #C13E93;          /* azalea pink */
    --color-accent-dark: #872B67;
    --color-highlight-bg: #F5E9E2;    /* pale clay */

    --color-text: #2A1F26;            /* dark plum-grey */
    --color-muted: #766E72;

    --color-border: #D6D3D4;
    --color-border-light: #E5E3E3;
    --color-divider: #EFEEED;
    --color-btn-secondary: #E3E1E1;
}

/* --------------------------------------------------------------------------
   SIGNAL COLORS — the same in every theme
   (right/wrong answers, warnings, delete buttons, sticky notes)
   -------------------------------------------------------------------------- */
:root {
    --color-success: #1e7e34;         /* right answers, "email sent" */
    --color-success-bg: #e6f4ea;
    --color-success-btn: #4caf50;     /* Save and Enroll buttons */

    --color-warning: #ffa500;         /* orange: answers waiting to be checked */

    --color-danger: #c0392b;          /* wrong answers, error messages, delete links */
    --color-danger-bg: #fdecea;
    --color-danger-zone-bg: #fff8f8;  /* "delete my account" area */
    --color-danger-zone-line: #ffcccc;
    --color-danger-btn: #d9534f;      /* Delete account button */
    --color-danger-btn-hover: #c9302c;

    --color-notice-bg: #fff8dc;       /* "viewing as student" banner, temporary password box */
    --color-notice-border: #e0c46c;

    --color-note-bg: #fff9a8;         /* classroom sticky notes */
    --color-note-border: #e0d97a;

    --color-overlay: rgba(0, 0, 0, 0.4); /* dark screen behind pop-up boxes */
}