/* ============================================================
   DNA Coach Assist - Design tokens (single source of truth)
   ------------------------------------------------------------
   Loaded AFTER main.min.css (compiled Bootstrap 5.3.3, $primary
   #0f6797) and BEFORE custom.css / landing css / study css.

   Palette: green / grey / blue / brown on warm paper white.
   Light values live in :root, dark values in [data-bs-theme="dark"].
   Components must reference these tokens (or Bootstrap vars that
   are mapped onto them here) - never raw hex - so the whole app
   re-themes from this one file.
   ============================================================ */

:root,
[data-bs-theme="light"] {
    color-scheme: light;

    /* ---- Brand palette ---- */
    --brand-blue: #0f6797;          /* primary action */
    --brand-blue-deep: #0a4a6e;     /* hover / emphasis */
    --brand-blue-bright: #1a7fb5;   /* gradients, highlights */
    --brand-sage: #5a7d5f;          /* progress, status */
    --brand-sage-light: #7a9d7f;
    --brand-forest: #3d5a40;        /* deep green text */
    --brand-green: #2d6a4f;         /* success */
    --brand-brown: #8b5a3c;         /* craft accents, eyebrows */
    --brand-brown-soft: #a07856;
    --brand-paper: #fbf9f6;         /* warm body background */
    --brand-paper-alt: #f5f0ea;     /* alternate warm section */
    --brand-cream: #f8f6f2;         /* status surfaces */
    --brand-error: #c1554f;         /* warm error red */

    /* ---- Semantic surfaces & ink ---- */
    --surface: var(--brand-paper);          /* page background */
    --surface-raised: #ffffff;              /* cards, grids, modals */
    --surface-sunken: var(--brand-paper-alt);
    --ink: #2c3338;
    --ink-muted: #5a6570;
    --rule: rgba(44, 51, 56, 0.12);         /* hairlines, borders */
    --rule-soft: rgba(44, 51, 56, 0.07);

    /* ---- Depth scale (blue-tinted, never pure black) ---- */
    --shadow-sm: 0 1px 3px rgba(15, 30, 50, 0.06);
    --shadow-md: 0 2px 8px rgba(15, 30, 50, 0.07), 0 8px 24px rgba(15, 30, 50, 0.06);
    --shadow-lg: 0 4px 16px rgba(15, 30, 50, 0.10), 0 20px 60px rgba(15, 103, 151, 0.12);

    /* ---- Radius scale ---- */
    --radius-sm: 0.375rem;
    --radius: 0.625rem;
    --radius-lg: 1rem;

    /* ---- Typography ---- */
    --bs-body-font-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;

    /* ---- Bootstrap mappings (steer the compiled theme) ---- */
    --bs-body-bg: var(--surface);
    --bs-body-color: var(--ink);
    --bs-secondary-color: var(--ink-muted);
    --bs-border-color: var(--rule);
    --bs-tertiary-bg: var(--surface-sunken);

    /* ---- Legacy alias blocks (kept so existing CSS keeps working;
            their old definitions are removed from the per-app files) ---- */
    --status-sage: var(--brand-sage);
    --status-sage-light: var(--brand-sage-light);
    --status-forest: var(--brand-forest);
    --status-cream: var(--brand-cream);
    --status-warm-gray: var(--ink-muted);
    --status-success: var(--brand-green);
    --status-error: var(--brand-error);
    --status-shadow: rgba(61, 90, 64, 0.08);

    --landing-primary: var(--brand-blue);
    --landing-primary-dark: var(--brand-blue-deep);
    --landing-primary-light: #e8f4fa;
    --landing-warm: var(--brand-paper);
    --landing-warm-alt: var(--brand-paper-alt);

    --study-brand: #1a6b5a;
    --study-brand-hover: #155a4b;

    /* Session badge colour ring (8-step, matches SESSION_BADGE_COLORS in coaching_extras.py) */
    --sb-1: #4A90D9; --sb-2: #D4883A; --sb-3: #2EAAA1; --sb-4: #9B59B6;
    --sb-5: #C75C5C; --sb-6: #5BA058; --sb-7: #E67E73; --sb-8: #3D7EA6;
}

[data-bs-theme="dark"] {
    color-scheme: dark;

    /* ---- Brand palette (lifted for dark contrast) ---- */
    --brand-blue: #4da3cf;
    --brand-blue-deep: #7dbede;
    --brand-blue-bright: #3a8fc0;
    --brand-sage: #8aab8f;
    --brand-sage-light: #a3c0a7;
    --brand-forest: #9dbfa2;
    --brand-green: #6fae8d;
    --brand-brown: #c89b74;
    --brand-brown-soft: #b58860;
    --brand-paper: #14191e;          /* warm blue-black, not grey */
    --brand-paper-alt: #181e24;
    --brand-cream: #1a2026;
    --brand-error: #d97f78;

    /* ---- Semantic surfaces & ink ---- */
    --surface: var(--brand-paper);
    --surface-raised: #1d242b;
    --surface-sunken: #10151a;
    --ink: #e6e4df;                  /* warm off-white */
    --ink-muted: #a3adb6;
    --rule: rgba(230, 228, 223, 0.14);
    --rule-soft: rgba(230, 228, 223, 0.08);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.45), 0 20px 60px rgba(0, 0, 0, 0.40);

    /* ---- Bootstrap mappings ---- */
    --bs-body-bg: var(--surface);
    --bs-body-color: var(--ink);
    --bs-secondary-color: var(--ink-muted);
    --bs-border-color: var(--rule);
    --bs-tertiary-bg: var(--surface-sunken);
    /* Lighter primary for legible links/badges on dark */
    --bs-primary: var(--brand-blue);
    --bs-primary-rgb: 77, 163, 207;
    --bs-link-color: var(--brand-blue);
    --bs-link-color-rgb: 77, 163, 207;
    --bs-link-hover-color: var(--brand-blue-deep);
    --bs-link-hover-color-rgb: 125, 190, 222;

    --status-shadow: rgba(0, 0, 0, 0.3);
    --landing-primary-light: #1b3242;
    --study-brand: #4ea08c;
    --study-brand-hover: #5fb29d;

    /* Session badge colour ring - lifted for dark-mode legibility */
    --sb-1: #6aabf0; --sb-2: #e8a35a; --sb-3: #4dc7bd; --sb-4: #b67cd4;
    --sb-5: #e07878; --sb-6: #76c073; --sb-7: #f09490; --sb-8: #5999c7;
}

/* ============================================================
   Foundational component steering (both themes, token-driven)
   ============================================================ */

/* Raised surfaces: cards/modals/dropdowns/offcanvas/accordions sit on
   white (light) / raised ink (dark) while the body keeps warm paper. */
.card,
.modal,
.dropdown-menu,
.offcanvas,
.accordion,
.list-group,
.toast {
    --bs-card-bg: var(--surface-raised);
    --bs-modal-bg: var(--surface-raised);
    --bs-dropdown-bg: var(--surface-raised);
    --bs-offcanvas-bg: var(--surface-raised);
    --bs-accordion-bg: var(--surface-raised);
    --bs-list-group-bg: var(--surface-raised);
    --bs-toast-bg: var(--surface-raised);
}

/* Filled-primary controls keep the deep brand blue in BOTH themes
   (the dark --bs-primary above is for text/links; a pale filled button
   would lose presence). */
.btn-primary {
    --bs-btn-bg: #0f6797;
    --bs-btn-border-color: #0f6797;
    --bs-btn-hover-bg: #0a4a6e;
    --bs-btn-hover-border-color: #0a4a6e;
    --bs-btn-active-bg: #0a4a6e;
    --bs-btn-active-border-color: #0a4a6e;
    --bs-btn-disabled-bg: #0f6797;
    --bs-btn-disabled-border-color: #0f6797;
}

[data-bs-theme="dark"] .btn-primary {
    --bs-btn-bg: #136d9e;
    --bs-btn-border-color: #136d9e;
    --bs-btn-hover-bg: #1a7fb5;
    --bs-btn-hover-border-color: #1a7fb5;
    --bs-btn-active-bg: #1a7fb5;
    --bs-btn-active-border-color: #1a7fb5;
    --bs-btn-disabled-bg: #136d9e;
    --bs-btn-disabled-border-color: #136d9e;
}

[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--brand-blue);
    --bs-btn-border-color: var(--brand-blue);
    --bs-btn-hover-bg: rgba(77, 163, 207, 0.15);
    --bs-btn-hover-color: var(--brand-blue-deep);
    --bs-btn-hover-border-color: var(--brand-blue-deep);
    --bs-btn-active-bg: rgba(77, 163, 207, 0.2);
    --bs-btn-active-color: var(--brand-blue-deep);
    --bs-btn-active-border-color: var(--brand-blue-deep);
}

/* ============================================================
   Shared typographic primitives
   ============================================================ */

/* Editorial display face for big headings (landing hero, page titles,
   auth card titles, analysis report headings). Body/UI stays Archivo. */
.font-display {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Eyebrow label: the small uppercase kicker above headings.
   Brown by default (craft accent); contexts may recolour. */
.eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--brand-brown);
    margin-bottom: 0.5rem;
}

/* ============================================================
   Motion guard
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}