/* Source of truth for the design tokens — implements DESIGN.md (the Intensity
   system) on the brutalist-tuned M3 palette in docs/design/M3.brutalist.json (seed
   #6D28D9, surfaces on a warm cream rather than pink, outline overridden to
   near-black for brutalist borders, harmonized:false on extended colours so
   info + warning stay vivid).
   Light theme is default; root[data-theme="dark"] OR html.dark flips to dark
   roles. Legacy --theme-* / --brand-* aliases at the bottom keep older CSS
   (chat.css, inline <style> blocks, etc.) working against the new palette
   without re-editing them.
   This file is loaded by content/theme_base.html universally, and by
   copilot/base.html again AFTER chat.css so its :root wins over chat.css's
   legacy :root block. */

:root {
    /* ============================================
       Constant across tiers and themes
       ============================================ */
    --ff-head: 'Google Sans', 'Google Sans Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ff-body: 'Google Sans Flex', 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --r: 10px;
    --r-sm: 8px;
    --pill: 999px;
    --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;  --s6: 48px;  --s8: 64px;

    /* ============================================
       LIGHT theme (default) — M3.brutalist, seed #6D28D9.
       Warm cream surfaces (not pink), near-black outline, pure-white cards.
       ============================================ */
    --ink: #1B1A16;
    --paper: #FFFFFF;
    --muted: #474539;
    --body-bg: #E8E3D4;
    /* Surfaces — minimum-lavender ladder. Surface is pure white; the other
       two carry a couple of units of lavender so the tier-separated page
       tints still differ visibly. */
    --surface: #FFFFFF;
    --surf-low: #FDFCFF;
    --surf: #F8F6FD;
    --outline-var: #B7B2A2;
    --outline: #1B1A16;           /* brutalist override: NEAR-BLACK (not M3 grey) */
    --mark-bd: #C7ACFF;

    --primary: #6D28D9;
    --on-primary: #FFFFFF;
    --primary-c: #E6DAFF;
    --on-primary-c: #2C0E73;

    /* Semantic roles */
    --revenue: #6D28D9;
    --revenue-c: #E6DAFF;
    --on-revenue-c: #2C0E73;

    --content: #14773F;           /* forest green */
    --content-c: #B2FFC4;          /* mint */
    --on-content-c: #00391C;

    --warning: #BA1A1A;           /* error red — used across the codebase as the
                                     "something is wrong" colour. The amber M3
                                     warning role is reserved for "calc. risk"
                                     styling and exposed as --alert below. */
    --on-warning: #FFFFFF;        /* text directly on --warning (e.g. delete
                                     buttons, notification count pills) — white
                                     in light, dark red in dark so contrast
                                     stays AAA on the role colour. */
    --warning-c: #FFDAD6;
    --on-warning-c: #690005;

    --info: #1660A8;              /* neutral data emphasis (trending %, metric chips) */
    --info-c: #D5E3FF;
    --on-info-c: #00315C;

    --alert: #8A5300;             /* amber — for calculated-risk badges */
    --alert-c: #FFDDB3;
    --on-alert-c: #2C1700;
}

/* ============================================
   DARK theme — M3.brutalist dark roles.
   ============================================ */
:root[data-theme="dark"],
html.dark {
    --ink: #E8E3D4;
    --paper: #201F1B;
    --muted: #CAC4B4;
    --body-bg: #000000;
    --surface: #000000;
    --surf-low: #0A0A0A;
    --surf: #141414;
    --outline-var: #474539;
    --outline: #E8E3D4;
    --mark-bd: #5018C4;

    --primary: #C7ACFF;
    --on-primary: #3C1591;
    --primary-c: #5018C4;
    --on-primary-c: #E6DAFF;

    --revenue: #C7ACFF;
    --revenue-c: #5018C4;
    --on-revenue-c: #E6DAFF;

    --content: #91ECA8;
    --content-c: #00522C;
    --on-content-c: #B2FFC4;

    --warning: #FFB4AB;
    --on-warning: #690005;        /* dark red text on light pink warning bg */
    --warning-c: #93000A;
    --on-warning-c: #FFDAD6;

    --info: #A6C8FF;
    --info-c: #004883;
    --on-info-c: #D5E3FF;

    --alert: #FFB951;
    --alert-c: #663E00;
    --on-alert-c: #FFDDB3;
}

/* ============================================
   Intensity tiers — DESIGN.md §2.
   Set ONE on a page/section wrapper (typically <body>).
   The .tier-* form is the canonical name; .t-* is a short alias.
   ============================================ */
.tier-marketing, .t-mkt {
    --bd: 2px solid var(--ink);
    --bd-mark: 2px solid var(--ink);
    --sh: 5px 5px 0 var(--ink);
    --sh-2: 3px 3px 0 var(--ink);
    --sh-press: 2px 2px 0 var(--ink);
    --page: var(--surf);
    --pad: 22px;
    --gap: 14px;
    --h: 2.3rem;
    --num: 2.5rem;
    --btn-f: .98rem;
    --btn-p: .62rem 1.4rem;
}

.tier-onboarding, .t-onb {
    --bd: 2px solid var(--ink);
    --bd-mark: 2px solid var(--ink);
    --sh: 3px 3px 0 var(--ink);
    --sh-2: 2px 2px 0 var(--ink);
    --sh-press: 1px 1px 0 var(--ink);
    --page: var(--surf-low);
    --pad: 18px;
    --gap: 12px;
    --h: 1.9rem;
    --num: 2.1rem;
    --btn-f: .9rem;
    --btn-p: .52rem 1.2rem;
}

.tier-daily, .t-day {
    /* Brutalist-tuned Daily tier: hairline border + soft blur. Shadow bumped
       a second time after surface went to pure white (#FFFFFF) — needed more
       elevation so white paper cards visibly lift off the same-white page.
       Still no offset; just stronger ambient blur. */
    --bd: 1px solid var(--outline-var);
    --bd-mark: 1px solid var(--mark-bd);
    --sh: 0 1px 2px rgba(27, 26, 22, .06), 0 4px 14px rgba(27, 26, 22, .12);
    --sh-2: none;
    --sh-press: none;
    --page: var(--surf-low);
    --pad: 14px;
    --gap: 10px;
    --h: 1.5rem;
    --num: 1.7rem;
    --btn-f: .85rem;
    --btn-p: .46rem 1.05rem;
}

/* Daily tier in DARK mode: invert the typical page-card elevation. Cards
   take the DEEPEST tone (--surface, #14130F) — matching the chat panel
   which already reads as the most "near-black, content-forward" surface
   — and the surrounding page is the lighter --surf (#201F1B). This sets
   the page slightly above the cards so the dark cards visually drop INTO
   the page rather than lifting above it. Reads more like a reader/editor
   surface and content contrast is stronger. */
:root[data-theme="dark"] .tier-daily,
:root[data-theme="dark"] .t-day,
html.dark .tier-daily,
html.dark .t-day {
    --page: var(--surf);      /* #201F1B — slightly elevated page */
    --paper: var(--surface);  /* #14130F — cards are the deepest tone */
    /* Shadows do almost nothing on near-black; keep them as black-alpha
       so they faintly register as a vignette at the card edge. */
    --sh: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .45);
}

/* ============================================
   Legacy aliases — map the old --theme-* / --brand-* names that
   chat.css, message_styles.html, snapshot/styles.css and inline
   <style> blocks still reference. These point at the M3.brutalist
   tokens above, so they auto-flip with light/dark.
   ============================================ */
:root {
    /* --theme-bg-primary stays as the PAGE background.
       --theme-bg-secondary maps to --paper (pure white) so legacy-styled
       cards/panels visually separate from the tinted page (surf-low).
       Before this fix, calculator + opportunity + niche-intel + optimization
       cards rendered against the SAME colour as the page bg and blended in.
       --theme-bg-alt stays as --surf for nested elevated zones inside cards. */
    --theme-bg-primary: var(--surface);
    --theme-bg-secondary: var(--paper);
    --theme-bg-alt: var(--surf);
    --theme-text-primary: var(--ink);
    --theme-text-secondary: var(--ink);
    --theme-text-tertiary: var(--muted);
    --theme-border: var(--outline-var);
    --theme-shadow: rgba(27, 26, 22, .12);
    --theme-overlay: rgba(0, 0, 0, .4);

    --brand-primary: var(--primary);
    --brand-accent: color-mix(in srgb, var(--primary) 85%, var(--ink));
    --brand-success: var(--content);
    --brand-error: var(--warning);
}

:root[data-theme="dark"],
html.dark {
    --theme-shadow: rgba(0, 0, 0, .45);
    --theme-overlay: rgba(0, 0, 0, .6);
}

/* MyCoCreator logo: the ink variant's source SVG is coloured #1B1A16 so it
   renders correctly in light mode; dark mode inverts it to warm off-white.
   The :not() guard excludes the violet variant (mycocreator-logo-violet.svg)
   from the invert — that file is brand-violet and shouldn't be inverted
   (would render as yellow-green). Marketing pages render light-only by
   default anyway, so the violet variant rarely meets dark mode. */
html.dark img[src*="mycocreator-logo"]:not([src*="violet"]):not([src*="icon"]),
:root[data-theme="dark"] img[src*="mycocreator-logo"]:not([src*="violet"]):not([src*="icon"]) {
    filter: invert(1);
}