/* ============================================================
   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);
    /* The brief wash on an item a deep link (?highlight=) scrolls to: the brand blue mixed
       into the raised surface. Opaque on purpose: it replaces a card's own background, and a
       translucent tint let the darker page show through in dark mode. */
    --deep-link-highlight: color-mix(in srgb, rgb(var(--bs-primary-rgb)) 14%, var(--surface-raised));

    /* ---- 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;
    /* THE "fancy" face: page titles, object titles, card titles. Change it here and in
       main/templates/main/snippets/g_fonts.html (which loads it) - nowhere else. */
    --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;

    /* ---- Domains (docs/PLAN_COACH_OFFER.md 4.1) ----
       One colour per thing a coach works with, read by tiles, page header
       icons and home tiles. --domain-* is the fill (a white glyph sits on
       it, so it stays deep in both themes and is not redefined below);
       --domain-*-ink is the colour for a glyph or text on the page, lifted
       in dark mode. Hex, not var(--brand-*): the brand vars lift in dark. */
    --domain-session: #0f6797;      /* bi-mic-fill */
    --domain-analysis: #3d6b45;     /* bi-lightbulb-fill */
    --domain-client: #4b5a66;       /* bi-people-fill */
    --domain-prepare: #2d6a4f;      /* bi-compass (brand green) */
    --domain-briefing: #8b5a3c;     /* bi-clipboard-pulse */
    --domain-report: #5b4a8a;       /* bi-file-earmark-person */
    --domain-development: #a07856;  /* bi-graph-up-arrow (brand brown soft) */
    --domain-icf: #5a7d5f;          /* bi-award (brand sage) */
    --domain-session-ink: var(--domain-session);
    --domain-analysis-ink: var(--domain-analysis);
    --domain-client-ink: var(--domain-client);
    --domain-prepare-ink: var(--domain-prepare);
    --domain-briefing-ink: var(--domain-briefing);
    --domain-report-ink: var(--domain-report);
    --domain-development-ink: var(--domain-development);
    --domain-icf-ink: var(--domain-icf);

    /* 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);
    --deep-link-highlight: color-mix(in srgb, rgb(var(--bs-primary-rgb)) 28%, var(--surface-raised));

    --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;

    /* Domain ink lifted for dark mode (the same 55% white mix the tiles use) */
    --domain-session-ink: color-mix(in srgb, var(--domain-session) 55%, white);
    --domain-analysis-ink: color-mix(in srgb, var(--domain-analysis) 55%, white);
    --domain-client-ink: color-mix(in srgb, var(--domain-client) 55%, white);
    --domain-prepare-ink: color-mix(in srgb, var(--domain-prepare) 55%, white);
    --domain-briefing-ink: color-mix(in srgb, var(--domain-briefing) 55%, white);
    --domain-report-ink: color-mix(in srgb, var(--domain-report) 55%, white);
    --domain-development-ink: color-mix(in srgb, var(--domain-development) 55%, white);
    --domain-icf-ink: color-mix(in srgb, var(--domain-icf) 55%, white);

    /* 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;
    }
}