/*
 * Colour themes for My LLB Companion.
 *   navy  - Navy and Gold (the default)
 *   green - Light Green
 *   dark  - Dark (charcoal with gold accents), for night revision
 * The chosen theme is set on <html data-theme="..."> by public/js/theme.js and remembered in the browser.
 * Every colour below is a variable, so a page never needs its own hex values.
 */

/* ---------- 1. Navy and Gold (default) ---------- */
:root, [data-theme="navy"] {
    color-scheme: light;
    --nav-bg: #1F2A5A;
    --brand: #1F2A5A;  --brand-rgb: 31, 42, 90;
    --brand-hover: #18204A;  --brand-active: #121838;
    --brand-soft: #E9ECF8;  --brand-tint: #F3F4FA;
    --hero-a: #1F2A5A;  --hero-b: #34459A;  --hero-glow: rgba(201, 162, 39, .42);
    --page-bg: #FAF8F3;  --surface: #FFFFFF;  --border: #DDD8CB;
    --text: #1F2430;  --muted: #5C6070;
    --heading: #1F2A5A;
    --link: #1F2A5A;  --link-rgb: 31, 42, 90;  --link-hover: #121838;
    --accent: #C9A227;  --accent-text: #8A6D0B;  --accent-soft: #FBF1CC;
    --on-brand: #FFFFFF;
    --notice-bg: #FFF6DD;  --notice-border: #F2D58A;  --notice-text: #5B4300;
    --green: #1F7A4D;  --green-soft: #DFF3E6;
    --amber: #9A6A10;  --amber-soft: #FFF1CC;
    --teal: #0B7A78;   --teal-soft: #D5F2F1;
    --coral: #B8400F;  --coral-soft: #FFE3D6;
    --indigo: #3F46B8; --indigo-soft: #E3E4FB;
    --rose: #A8154F;   --rose-soft: #FFE1EA;
    --shadow: rgba(31, 42, 90, .20);
}

/* ---------- 2. Light Green ---------- */
[data-theme="green"] {
    color-scheme: light;
    --nav-bg: #2F855A;
    --brand: #2F855A;  --brand-rgb: 47, 133, 90;
    --brand-hover: #276749;  --brand-active: #22543D;
    --brand-soft: #E3F4E9;  --brand-tint: #F2FAF4;
    --hero-a: #276749;  --hero-b: #38966A;  --hero-glow: rgba(255, 216, 102, .40);
    --page-bg: #F2FAF4;  --surface: #FFFFFF;  --border: #CFE8D8;
    --text: #24352C;  --muted: #5B7568;
    --heading: #1A4D36;
    --link: #276749;  --link-rgb: 39, 103, 73;  --link-hover: #22543D;
    --accent: #E6A817;  --accent-text: #8A6D0B;  --accent-soft: #FFF1CC;
    --shadow: rgba(34, 84, 61, .20);
}

/* ---------- 3. Dark ---------- */
[data-theme="dark"] {
    color-scheme: dark;
    --nav-bg: #151A30;
    --brand: #4F62D8;  --brand-rgb: 79, 98, 216;
    --brand-hover: #6073E6;  --brand-active: #3F52C4;
    --brand-soft: #232A4A;  --brand-tint: #1E2336;
    --hero-a: #1B2148;  --hero-b: #2C3875;  --hero-glow: rgba(233, 196, 106, .30);
    --page-bg: #0F1118;  --surface: #181C28;  --border: #2B3144;
    --text: #E6E8F0;  --muted: #9AA1B5;
    --heading: #F0D58A;
    --link: #9DB0FF;  --link-rgb: 157, 176, 255;  --link-hover: #C5D0FF;
    --accent: #E9C46A;  --accent-text: #E9C46A;  --accent-soft: #3A3320;
    --notice-bg: #2B2615;  --notice-border: #5A4A1A;  --notice-text: #F2DFA0;
    --green: #6FD6A0;  --green-soft: rgba(111, 214, 160, .16);
    --amber: #F0C75E;  --amber-soft: rgba(240, 199, 94, .16);
    --teal: #5FD3D0;   --teal-soft: rgba(95, 211, 208, .16);
    --coral: #FF9C7A;  --coral-soft: rgba(255, 156, 122, .16);
    --indigo: #A5B0FF; --indigo-soft: rgba(165, 176, 255, .16);
    --rose: #FF8FB8;   --rose-soft: rgba(255, 143, 184, .16);
    --shadow: rgba(0, 0, 0, .55);
}

/* ---------- Bootstrap wiring ---------- */
:root, [data-theme] {
    --bs-primary: var(--brand);  --bs-primary-rgb: var(--brand-rgb);
    --bs-link-color: var(--link);  --bs-link-color-rgb: var(--link-rgb);
    --bs-link-hover-color: var(--link-hover);  --bs-link-hover-color-rgb: var(--link-rgb);
    --bs-body-bg: var(--page-bg);  --bs-body-color: var(--text);
    --bs-border-color: var(--border);
    --bs-secondary-color: var(--muted);
    --bs-success: var(--green);
    --bs-body-font-family: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Playfair Display Variable', 'Playfair Display', Georgia, 'Times New Roman', serif;
}
body { background-color: var(--page-bg); color: var(--text); font-size: 1rem; line-height: 1.6; }
.text-muted { color: var(--muted) !important; }
.text-primary { color: var(--link) !important; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .navbar-brand {
    font-family: var(--font-heading); font-weight: 700; letter-spacing: -.01em;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--heading); }
.hero-navy h1, .hero-navy h2, .hero-navy .h1, .reg-head h1 { color: #fff; }
.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6 { color: inherit; }
main > h1:first-child::after, main > .row h1:first-child::after, main > div > h1:first-child::after {
    content: ''; display: block; width: 56px; height: 4px; margin-top: .45rem; border-radius: 2px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
}
main h2.h4, main h2.h5 { position: relative; padding-left: .85rem; }
main h2.h4::before, main h2.h5::before {
    content: ''; position: absolute; left: 0; top: .2em; bottom: .2em; width: 4px; border-radius: 2px;
    background: linear-gradient(180deg, var(--brand), var(--accent));
}

/* ---------- Header colour and hero ---------- */
.bg-navy, .navbar.bg-navy { background-color: var(--nav-bg) !important; }
.navbar-brand .bi { color: var(--accent); }
.navbar .nav-link { font-weight: 500; }
.hero-navy {
    position: relative; overflow: hidden; color: #fff;
    background-image:
        radial-gradient(circle at 92% 12%, var(--hero-glow) 0, rgba(0, 0, 0, 0) 38%),
        radial-gradient(circle at 8% 120%, rgba(255, 255, 255, .14) 0, rgba(255, 255, 255, 0) 45%),
        linear-gradient(135deg, var(--hero-a) 0%, var(--hero-b) 100%);
}
.hero-navy h1 { font-size: calc(1.6rem + 1.4vw); }

/* ---------- Surfaces ---------- */
.card, .list-group-item, .dropdown-menu, .model-answer, .modal-content { background-color: var(--surface); color: var(--text); border-color: var(--border); }
.card { --bs-card-bg: var(--surface); --bs-card-border-color: var(--border); }
.card-header { background-color: var(--brand-soft); border-bottom-color: var(--border); border-left: 4px solid var(--accent);
    font-family: var(--bs-body-font-family); font-weight: 600; color: var(--heading); }
.card-footer { background-color: var(--brand-tint); border-top-color: var(--border); }
.list-group { --bs-list-group-bg: var(--surface); --bs-list-group-border-color: var(--border); --bs-list-group-color: var(--text); }
a.list-group-item-action:hover, a.list-group-item-action:focus { background-color: var(--brand-soft); color: var(--text); }
.dropdown-item { color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--brand-soft); color: var(--text); }
.table { --bs-table-color: var(--text); --bs-table-border-color: var(--border); --bs-table-striped-bg: var(--brand-tint); --bs-table-hover-bg: var(--brand-soft); }
.table thead th { background-color: var(--brand-soft); color: var(--heading); border-bottom: 2px solid var(--border); }
footer { background-color: var(--brand-soft); color: var(--muted); }
footer a { color: var(--link); font-weight: 500; }
hr { border-color: var(--border); }

/* ---------- Buttons, forms, navigation ---------- */
.btn-primary { --bs-btn-color: var(--on-brand); --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: var(--on-brand); --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover);
    --bs-btn-active-color: var(--on-brand); --bs-btn-active-bg: var(--brand-active); --bs-btn-active-border-color: var(--brand-active);
    --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); --bs-btn-focus-shadow-rgb: var(--brand-rgb); }
.btn-outline-primary, .btn-outline-success { --bs-btn-color: var(--link); --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: var(--on-brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-color: var(--on-brand); --bs-btn-active-bg: var(--brand-hover); --bs-btn-active-border-color: var(--brand-hover);
    --bs-btn-focus-shadow-rgb: var(--brand-rgb); }
.btn-success { --bs-btn-bg: var(--green); --bs-btn-border-color: var(--green); --bs-btn-hover-bg: var(--green); --bs-btn-hover-border-color: var(--green); }
.btn-light { --bs-btn-color: #1F2430; }
.form-control, .form-select { background-color: var(--surface); color: var(--text); border-color: var(--border); }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--accent) 28%, transparent); background-color: var(--surface); color: var(--text); }
.form-control::placeholder { color: var(--muted); opacity: .75; }
.input-group-text { background-color: var(--brand-tint); color: var(--link); border-color: var(--border); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.list-group-item.active, .page-link.active, .active > .page-link { background-color: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.page-link { color: var(--link); background-color: var(--surface); border-color: var(--border); }
.nav-pills .nav-link.active, .nav-tabs .nav-link.active { background-color: var(--brand); color: var(--on-brand); }
.alert-info { --bs-alert-bg: var(--brand-soft); --bs-alert-border-color: var(--border); --bs-alert-color: var(--heading); }
.badge.text-bg-primary { background-color: var(--brand) !important; color: var(--on-brand) !important; }
.badge.text-bg-info { background-color: var(--teal) !important; color: #fff !important; }
.badge.text-bg-warning { background-color: var(--accent) !important; color: #2B2200 !important; }
.badge.text-bg-secondary { background-color: #6B7385 !important; color: #fff !important; }
[data-theme="dark"] .badge.text-bg-info { color: #06201F !important; }
[data-theme="dark"] .badge.text-bg-success { color: #06200F !important; }
[data-theme="dark"] .btn-light { --bs-btn-bg: #E6E8F0; --bs-btn-border-color: #E6E8F0; --bs-btn-hover-bg: #fff; }

/* ---------- Coloured icon tiles and feature cards ---------- */
.icon-tile { width: 3rem; height: 3rem; border-radius: .9rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.45rem; flex-shrink: 0; }
.tile-green  { background: var(--green-soft);  color: var(--green); }
.tile-amber  { background: var(--amber-soft);  color: var(--amber); }
.tile-teal   { background: var(--teal-soft);   color: var(--teal); }
.tile-coral  { background: var(--coral-soft);  color: var(--coral); }
.tile-indigo { background: var(--indigo-soft); color: var(--indigo); }
.tile-rose   { background: var(--rose-soft);   color: var(--rose); }
.card-feature { border-top: 4px solid var(--accent-card, var(--accent)); }
.card-feature .card-title { color: var(--heading); font-family: var(--font-heading); }
.accent-green  { --accent-card: var(--green); }
.accent-amber  { --accent-card: var(--amber); }
.accent-teal   { --accent-card: var(--teal); }
.accent-coral  { --accent-card: var(--coral); }
.accent-indigo { --accent-card: var(--indigo); }
.accent-rose   { --accent-card: var(--rose); }
.list-group-item .bi-file-earmark-text { color: var(--amber); }
.list-group-item .bi-chevron-right { color: var(--muted) !important; }
.list-group-item-action:hover .bi-chevron-right { color: var(--link) !important; }
.bi-box-arrow-up-right { color: var(--teal); }
h1 .bi, h2 .bi, h3 .bi, .h3 .bi, .h4 .bi, .h5 .bi { color: var(--accent-text); }

/* ---------- Notices and answer pages ---------- */
.study-notice { background: var(--notice-bg); border-bottom: 1px solid var(--notice-border); color: var(--notice-text); padding: .3rem 0; }
.study-notice .bi { color: var(--accent-text); }
.study-notice a { color: var(--notice-text); font-weight: 700; white-space: nowrap; text-decoration: underline; }
.model-answer { border: 1px solid var(--border); border-radius: .8rem; padding: 1.2rem 1.4rem; }
.model-answer p, .model-answer li { line-height: 1.7; }
.disclaimer-box { background: var(--notice-bg); border: 1px solid var(--notice-border); color: var(--notice-text); }
.disclaimer-box .bi { color: var(--accent-text); }

/* ---------- Chat widget ---------- */
.chat-bubble.me { background: var(--brand); color: var(--on-brand); }
.chat-bubble.bot { background: var(--brand-soft); color: var(--text); }

/* Alerts follow the theme: "success" tips and notices use the soft brand colour, warnings the gold notice colour. */
.alert-success { --bs-alert-bg: var(--brand-soft); --bs-alert-border-color: var(--border); --bs-alert-color: var(--heading); }
.alert-warning { --bs-alert-bg: var(--notice-bg); --bs-alert-border-color: var(--notice-border); --bs-alert-color: var(--notice-text); }
.alert-secondary { --bs-alert-bg: var(--brand-tint); --bs-alert-border-color: var(--border); --bs-alert-color: var(--text); }