/* ==========================================================================
   AVIANEDU — THEME FILE  ⭐ THIS IS THE ONLY FILE YOU EDIT TO CHANGE COLORS
   --------------------------------------------------------------------------
   Four palettes:  blue (DEFAULT) · pink · dark · light
   The active theme = the  data-theme  attribute on <html>.
   Blue also lives on :root, so if JavaScript is off the site still
   renders perfectly in the default blue theme (no flash, no breakage).
   ========================================================================== */

/* ---------- 1. BLUE — DEFAULT ------------------------------------------- */
:root,
[data-theme="blue"] {
    --primary: #0a9bd8;            /* brand blue — matches the logo      */
    --primary-dark: #0779ac;       /* hover / pressed states             */
    --primary-light: #35b4e6;      /* gradients, highlights              */
    --primary-soft: #e7f6fd;       /* tinted backgrounds (chips, badges) */
    --on-primary: #ffffff;         /* text/icon color ON primary         */

    --accent: #ffb547;             /* warm pop — used sparingly          */

    --heading: #0e2a3d;            /* h1–h6                              */
    --text: #46586d;               /* body copy                          */
    --muted: #7d90a4;              /* small print, captions              */

    --bg: #ffffff;                 /* page background                    */
    --surface: #ffffff;            /* cards, panels                      */
    --surface-2: #f4fafd;          /* alternating section background     */
    --border: #e3edf4;             /* hairlines, card borders            */

    --hero-grad-1: #e9f6fd;        /* hero gradient start                */
    --hero-grad-2: #ffffff;        /* hero gradient end                  */

    --header-bg: rgba(255, 255, 255, 0.92);
    --header-border: rgba(14, 42, 61, 0.08);

    --footer-bg: #0d2136;
    --footer-text: #b9c9d9;
    --footer-heading: #ffffff;
    --footer-link: #cfdce8;
    --footer-border: rgba(255, 255, 255, 0.10);

    --blob-1: rgba(10, 155, 216, 0.16);   /* decorative background blobs */
    --blob-2: rgba(255, 181, 71, 0.16);

    --shadow-card: 0 12px 30px rgba(14, 42, 61, 0.08);
    --shadow-pop: 0 22px 45px rgba(14, 42, 61, 0.16);
    --ring: rgba(10, 155, 216, 0.35);     /* focus outlines               */

    color-scheme: light;
}

/* ---------- 2. PINK ----------------------------------------------------- */
[data-theme="pink"] {
    --primary: #ec4899;
    --primary-dark: #c02a76;
    --primary-light: #f472b6;
    --primary-soft: #fdeaf4;
    --on-primary: #ffffff;

    --accent: #7c3aed;

    --heading: #3d1030;
    --text: #5d4a58;
    --muted: #97818f;

    --bg: #fffafc;
    --surface: #ffffff;
    --surface-2: #fdf1f7;
    --border: #f6dfea;

    --hero-grad-1: #fdeef6;
    --hero-grad-2: #ffffff;

    --header-bg: rgba(255, 252, 254, 0.92);
    --header-border: rgba(61, 16, 48, 0.08);

    --footer-bg: #33102a;
    --footer-text: #d4b9cb;
    --footer-heading: #ffffff;
    --footer-link: #e6cfdd;
    --footer-border: rgba(255, 255, 255, 0.10);

    --blob-1: rgba(236, 72, 153, 0.16);
    --blob-2: rgba(124, 58, 237, 0.14);

    --shadow-card: 0 12px 30px rgba(61, 16, 48, 0.08);
    --shadow-pop: 0 22px 45px rgba(61, 16, 48, 0.16);
    --ring: rgba(236, 72, 153, 0.35);

    color-scheme: light;
}

/* ---------- 3. DARK ----------------------------------------------------- */
[data-theme="dark"] {
    --primary: #38bdf8;
    --primary-dark: #0ea5e9;
    --primary-light: #7dd3fc;
    --primary-soft: rgba(56, 189, 248, 0.12);
    --on-primary: #06121f;         /* dark text on the light-blue accent  */

    --accent: #fbbf24;

    --heading: #f1f5f9;
    --text: #b6c2d2;
    --muted: #8695a8;

    --bg: #0b1424;
    --surface: #111d33;
    --surface-2: #0e1a2e;
    --border: #1f3049;

    --hero-grad-1: #10223c;
    --hero-grad-2: #0b1424;

    --header-bg: rgba(11, 20, 36, 0.90);
    --header-border: rgba(255, 255, 255, 0.08);

    --footer-bg: #070e1b;
    --footer-text: #93a3b8;
    --footer-heading: #f1f5f9;
    --footer-link: #b9c6d8;
    --footer-border: rgba(255, 255, 255, 0.08);

    --blob-1: rgba(56, 189, 248, 0.14);
    --blob-2: rgba(251, 191, 36, 0.10);

    --shadow-card: 0 12px 30px rgba(0, 0, 0, 0.35);
    --shadow-pop: 0 22px 45px rgba(0, 0, 0, 0.45);
    --ring: rgba(56, 189, 248, 0.40);

    color-scheme: dark;
}

/* ---------- 4. LIGHT — calm neutral with slate accents ------------------ */
[data-theme="light"] {
    --primary: #334155;
    --primary-dark: #1e293b;
    --primary-light: #475569;
    --primary-soft: #eef1f5;
    --on-primary: #ffffff;

    --accent: #0ea5e9;

    --heading: #18181b;
    --text: #52525b;
    --muted: #8b8b94;

    --bg: #fafafa;
    --surface: #ffffff;
    --surface-2: #f4f4f5;
    --border: #e4e4e7;

    --hero-grad-1: #f8fafc;
    --hero-grad-2: #fafafa;

    --header-bg: rgba(250, 250, 250, 0.92);
    --header-border: rgba(24, 24, 27, 0.08);

    --footer-bg: #18181b;
    --footer-text: #a1a1aa;
    --footer-heading: #fafafa;
    --footer-link: #d4d4d8;
    --footer-border: rgba(255, 255, 255, 0.10);

    --blob-1: rgba(51, 65, 85, 0.10);
    --blob-2: rgba(14, 165, 233, 0.12);

    --shadow-card: 0 12px 30px rgba(24, 24, 27, 0.07);
    --shadow-pop: 0 22px 45px rgba(24, 24, 27, 0.13);
    --ring: rgba(51, 65, 85, 0.35);

    color-scheme: light;
}
/* ---------- semantic status colours (same in every theme) ---------- */
:root {
    --danger: #e5484d;
    --success: #0f9d58;
}