/**
 * Interface themes.
 *
 * Every theme is a set of `--app-*` custom properties; the rest of the UI only
 * ever reads those, never a literal colour. A theme is selected by a
 * `data-theme` attribute written on <html> by the layout, and the same
 * attribute is reused on the theme picker previews so a card renders its own
 * theme exactly like a real page would.
 *
 * The Bootstrap variables are remapped once, below, using var() references.
 * Custom property substitution is lazy, so redefining `--app-surface` inside a
 * `[data-theme]` block is enough to recolour every component that reads it.
 */

/* Default look, also used by any element that carries no data-theme.
   "Ohana": the colours and type of the logo boards (Claude Design, "Logo Ohana").
   Deep lagoon #0B4F5C and teal #14808A for the adult turtles, a sea-glass ground
   #EEF6F4, the orange #EE7B4F of the little ones and the gold #F2B33D of the
   stars as accents, Fredoka for titles with Nunito, its fallback, for text. */
:root {
    --app-bg: linear-gradient(170deg, #F5FAF9 0%, #EEF6F4 55%, #DDF0EC 100%);
    --app-surface: #ffffff;
    --app-surface-alt: #EEF6F4;
    --app-surface-input: #ffffff;
    --app-text: #17383F;
    --app-text-muted: #567075;
    --app-heading-color: #0B4F5C;
    --app-border: rgba(11, 79, 92, 0.14);
    --app-border-strong: #C2DAD6;
    --app-primary: #0B4F5C;
    --app-primary-rgb: 11, 79, 92;
    --app-primary-contrast: #ffffff;
    --app-primary-soft: rgba(20, 128, 138, 0.10);
    --app-primary-gradient: linear-gradient(135deg, #0B4F5C 0%, #14808A 100%);
    --app-primary-gradient-hover: linear-gradient(135deg, #083A44 0%, #106B74 100%);
    --app-secondary: #567075;
    --app-accent: #EE7B4F;
    --app-accent-gold: #F2B33D;
    --app-danger: #C23B3B;
    --app-link: #0B6875;
    --app-focus: rgba(20, 128, 138, 0.30);
    --app-scrollbar: rgba(11, 79, 92, 0.30);
    --app-card-shadow: 0 0.125rem 0.6rem rgba(11, 79, 92, 0.08);
    --app-card-shadow-hover: 0 0.5rem 1.5rem rgba(11, 79, 92, 0.16);
    /* The close icon is a glyph mask drawn in black: it has to be inverted on
       a dark surface, left untouched on a light one. */
    --app-close-filter: none;
    --app-radius: 16px;
    --app-body-font: 'Nunito', sans-serif;
    --app-heading-font: 'Fredoka', sans-serif;
}

/* ------------------------------------------------------------------ ocean */
[data-theme="ocean"] {
    --app-bg: linear-gradient(160deg, #dff1ff 0%, #b6e3f5 45%, #9fd8e8 100%);
    --app-surface: #ffffff;
    --app-surface-alt: #eaf6fc;
    --app-surface-input: #f7fcff;
    --app-text: #123a4a;
    --app-text-muted: #5a7d8c;
    --app-heading-color: #0b2a38;
    --app-border: rgba(12, 74, 110, 0.16);
    --app-border-strong: #b9d9e6;
    --app-primary: #0b7285;
    --app-primary-rgb: 11, 114, 133;
    --app-primary-contrast: #ffffff;
    --app-primary-soft: rgba(11, 114, 133, 0.10);
    --app-primary-gradient: linear-gradient(135deg, #0b7285 0%, #1098ad 100%);
    --app-primary-gradient-hover: linear-gradient(135deg, #095c6c 0%, #0c7f91 100%);
    --app-secondary: #5a7d8c;
    --app-danger: #c92a3c;
    --app-link: #0b7285;
    --app-focus: rgba(11, 114, 133, 0.25);
    --app-card-shadow: 0 0.125rem 0.5rem rgba(12, 74, 110, 0.10);
    --app-card-shadow-hover: 0 0.5rem 1.5rem rgba(12, 74, 110, 0.18);
    --app-radius: 12px;
    --app-body-font: 'Nunito', sans-serif;
    --app-heading-font: 'Sora', sans-serif;
}

/* ----------------------------------------------------------------- forest */
[data-theme="forest"] {
    --app-bg: linear-gradient(165deg, #eef4e4 0%, #dbe8cd 55%, #cfe0c4 100%);
    --app-surface: #fffdf7;
    --app-surface-alt: #f2f5e9;
    --app-surface-input: #fffefb;
    --app-text: #2f3b2a;
    --app-text-muted: #6b7a63;
    --app-heading-color: #24331f;
    --app-border: rgba(47, 74, 40, 0.18);
    --app-border-strong: #c2d1b6;
    --app-primary: #4a7c3f;
    --app-primary-rgb: 74, 124, 63;
    --app-primary-contrast: #ffffff;
    --app-primary-soft: rgba(74, 124, 63, 0.10);
    --app-primary-gradient: linear-gradient(135deg, #3f6b33 0%, #6ba24a 100%);
    --app-primary-gradient-hover: linear-gradient(135deg, #36592c 0%, #5b8c3f 100%);
    --app-secondary: #6b7a63;
    --app-danger: #b02a37;
    --app-link: #3f6b33;
    --app-focus: rgba(74, 124, 63, 0.25);
    --app-card-shadow: 0 0.125rem 0.5rem rgba(47, 74, 40, 0.10);
    --app-card-shadow-hover: 0 0.5rem 1.5rem rgba(47, 74, 40, 0.18);
    --app-radius: 8px;
    --app-body-font: 'Karla', sans-serif;
    --app-heading-font: 'Bitter', serif;
}

/* ----------------------------------------------------------------- sunset */
[data-theme="sunset"] {
    --app-bg: linear-gradient(140deg, #ffe8d0 0%, #ffcfb0 45%, #ffd3a5 100%);
    --app-surface: #fffaf5;
    --app-surface-alt: #ffeede;
    --app-surface-input: #fffdfb;
    --app-text: #43291c;
    --app-text-muted: #8a6a58;
    --app-heading-color: #33200f;
    --app-border: rgba(140, 79, 40, 0.20);
    --app-border-strong: #e8cdb6;
    --app-primary: #d9480f;
    --app-primary-rgb: 217, 72, 15;
    --app-primary-contrast: #ffffff;
    --app-primary-soft: rgba(217, 72, 15, 0.10);
    --app-primary-gradient: linear-gradient(135deg, #e8590c 0%, #f08c00 100%);
    --app-primary-gradient-hover: linear-gradient(135deg, #d9480f 0%, #d2820a 100%);
    --app-secondary: #8a6a58;
    --app-danger: #c92a3c;
    --app-link: #c2410c;
    --app-focus: rgba(217, 72, 15, 0.25);
    --app-card-shadow: 0 0.125rem 0.5rem rgba(140, 79, 40, 0.10);
    --app-card-shadow-hover: 0 0.5rem 1.5rem rgba(140, 79, 40, 0.18);
    --app-radius: 20px;
    --app-body-font: 'Nunito Sans', sans-serif;
    --app-heading-font: 'Baloo 2', cursive;
}

/* --------------------------------------------------------------- midnight */
[data-theme="midnight"] {
    --app-bg: linear-gradient(160deg, #0f172a 0%, #131c31 50%, #0b1220 100%);
    --app-surface: #1b2337;
    --app-surface-alt: #232d44;
    --app-surface-input: #161d2e;
    --app-text: #e2e8f0;
    --app-text-muted: #94a3b8;
    --app-heading-color: #f1f5f9;
    --app-border: rgba(148, 163, 184, 0.24);
    --app-border-strong: #38445c;
    --app-primary: #60a5fa;
    --app-primary-rgb: 96, 165, 250;
    --app-primary-contrast: #0b1220;
    --app-primary-soft: rgba(96, 165, 250, 0.14);
    --app-primary-gradient: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    --app-primary-gradient-hover: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%);
    --app-secondary: #94a3b8;
    --app-danger: #f87171;
    --app-link: #93c5fd;
    --app-focus: rgba(96, 165, 250, 0.35);
    --app-scrollbar: rgba(148, 163, 184, 0.45);
    --app-card-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.45);
    --app-card-shadow-hover: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.6);
    --app-close-filter: invert(1) grayscale(100%) brightness(200%);
    --app-radius: 10px;
    --app-body-font: 'Inter', sans-serif;
    --app-heading-font: 'Outfit', sans-serif;
}

/*
 * Bootstrap variable remapping. Every component that already reads a --bs-*
 * variable (links, cards, modals, tables, alerts, focus rings, the body font)
 * follows the theme without a single extra rule.
 */
:root {
    --bs-body-bg: var(--app-surface);
    --bs-body-color: var(--app-text);
    --bs-emphasis-color: var(--app-text);
    --bs-secondary-color: var(--app-text-muted);
    --bs-heading-color: var(--app-heading-color);
    --bs-border-color: var(--app-border);
    --bs-border-color-translucent: var(--app-border);
    --bs-link-color: var(--app-link);
    --bs-link-hover-color: var(--app-link);
    --bs-primary: var(--app-primary);
    --bs-primary-rgb: var(--app-primary-rgb);
    --bs-body-font-family: var(--app-body-font);
    --bs-focus-ring-color: var(--app-focus);
    --bs-table-bg: transparent;
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-border);
    --bs-table-hover-bg: var(--app-primary-soft);
    --bs-table-hover-color: var(--app-text);
    --bs-form-select-indicator-color: var(--app-text-muted);
}

/*
 * Components Bootstrap paints from literals rather than from its own
 * variables, so they need one explicit rule each.
 */
body {
    font-family: var(--app-body-font);
    background: var(--app-bg);
    color: var(--app-text);
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.table th, .fw-bold {
    font-family: var(--app-heading-font);
}

/* An icon sized with a display class (the big icon of a confirmation page) or
   set in bold keeps the Font Awesome font: the heading font above would
   otherwise replace it and the glyph would not show. */
.fa-solid[class*="display-"], .fa-regular[class*="display-"],
.fa-solid.fw-bold, .fa-regular.fw-bold {
    font-family: "Font Awesome 6 Free";
}

.fa-brands[class*="display-"], .fa-brands.fw-bold {
    font-family: "Font Awesome 6 Brands";
}

h1, h2, h3, h4, h5, h6 {
    color: var(--app-heading-color);
}

/* bg-light is used for the footer and for the light audit badges: it must carry
   the readable text colour of the theme, not Bootstrap's near-black. */
.bg-light {
    background-color: var(--app-surface-alt) !important;
    color: var(--app-text) !important;
}

.shadow-sm {
    box-shadow: var(--app-card-shadow) !important;
}

.table-light {
    --bs-table-bg: var(--app-surface-alt);
    --bs-table-color: var(--app-text);
}

.form-control,
.form-select {
    background-color: var(--app-surface-input);
    color: var(--app-text);
    border-color: var(--app-border-strong);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--app-surface-input);
    color: var(--app-text);
    border-color: var(--app-primary);
    box-shadow: 0 0 0 0.25rem var(--app-focus);
}

.form-control::placeholder {
    color: var(--app-text-muted);
}

.form-check-input {
    background-color: var(--app-surface-input);
    border-color: var(--app-border-strong);
}

.form-check-input:checked {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
}

.form-check-input:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 0.25rem var(--app-focus);
}

.btn-primary {
    color: var(--app-primary-contrast);
}

.btn-outline-primary {
    color: var(--app-primary);
    border-color: var(--app-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible,
.btn-outline-primary:active {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
    color: var(--app-primary-contrast);
}

.btn-outline-secondary {
    color: var(--app-secondary);
    border-color: var(--app-border-strong);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible,
.btn-outline-secondary:active {
    background-color: var(--app-primary-soft);
    border-color: var(--app-primary);
    color: var(--app-text);
}

.btn-outline-danger {
    color: var(--app-danger);
    border-color: var(--app-danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus-visible,
.btn-outline-danger:active {
    background-color: var(--app-danger);
    border-color: var(--app-danger);
    color: var(--app-primary-contrast);
}

.btn-close {
    filter: var(--app-close-filter);
}

/* Bootstrap resets the filter on hover, which would turn the glyph black again
   on a dark surface. */
.btn-close:hover,
.btn-close:focus {
    filter: var(--app-close-filter);
    opacity: 0.75;
}

/* The dark theme inverts the alert palette: Bootstrap ships light tints that
   would glare on a dark page, and their text colour is a fixed dark grey. */
[data-theme="midnight"] .alert-success {
    --bs-alert-color: #86efac;
    --bs-alert-bg: #14331f;
    --bs-alert-border-color: #1f5c34;
}

[data-theme="midnight"] .alert-danger {
    --bs-alert-color: #fca5a5;
    --bs-alert-bg: #3a1620;
    --bs-alert-border-color: #6d2434;
}

[data-theme="midnight"] .alert-info {
    --bs-alert-color: #93c5fd;
    --bs-alert-bg: #14283f;
    --bs-alert-border-color: #234a72;
}

[data-theme="midnight"] .alert-warning {
    --bs-alert-color: #fcd34d;
    --bs-alert-bg: #3a2c10;
    --bs-alert-border-color: #6b5117;
}