/* ============================================================================
 * brand_tokens.css — geoDB UI v2 design tokens (ui_rebrand_and_app_refresh §2.1)
 *
 * Loaded ONLY when resolve_ui_experience() == 'v2' (base_v2.html). The classic
 * experience never links this file — pinned by the always-light/classic tests.
 *
 * Token blocks are copied VERBATIM from the approved app-shell mock
 * (~/workspace/marketing/rebrand/app_refresh/app-refresh-template.html) per
 * spec §0.1 — do not re-derive hexes. Chart tokens (--chart-*) are the
 * VALIDATED dataviz set from landing_v3/README.md; any new chart color must
 * re-run the palette validator on both surfaces.
 *
 * Theming pattern (load-bearing): light tokens on :root; dark redefines them
 * under @media (prefers-color-scheme: dark); explicit :root[data-theme=...]
 * overrides beat the OS preference in BOTH directions. Components reference
 * tokens only.
 * ========================================================================== */

/* ── Self-hosted brand fonts (static/fonts/, from landing_v3) ── */
@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/bricolage-400_800.woff2') format('woff2');font-weight:400 800;font-display:swap;}
@font-face{font-family:'Figtree';src:url('../fonts/figtree-300_700.woff2') format('woff2');font-weight:300 700;font-display:swap;}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/plexmono-400.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/plexmono-600.woff2') format('woff2');font-weight:600;font-display:swap;}
@font-face{font-family:'Quicksand';src:url('../fonts/quicksand-500.woff2') format('woff2');font-weight:500;font-display:swap;}

/* ── Tokens: light (default) ── */
:root{
  --ground:#f5f7f6; --panel:#ffffff; --panel-2:#edf1ef; --ink:#1b1926; --ink-2:#575264; --ink-3:#8b8699;
  --line:#dfe5e2; --line-soft:#e9edeb; --accent:#5600ea; --accent-soft:#efe9fd; --accent-line:#d8c9f9;
  --teal:#0b8672; --teal-soft:#e2f2ee; --gold:#a97b12; --gold-soft:#f7efdb;
  --good:#1a7f4b; --good-soft:#e2f3e9; --warn:#a05e03; --warn-soft:#faeeda; --bad:#b3352b; --bad-soft:#fae5e3;
  --chart-1:#5600ea; --chart-2:#0b8672; --chart-3:#a97b12;
  --cta-bg:#5600ea; --cta-ink:#fff; --wordmark:#5600ea;
  --rail-bg:#1b1926; --rail-ink:#b9b4c7; --rail-active:#ffffff; --rail-line:#2e2b3d;
  --shadow:0 1px 2px rgba(27,25,38,.05),0 6px 20px -10px rgba(27,25,38,.12);
  --shadow-lg:0 2px 4px rgba(27,25,38,.06),0 24px 60px -24px rgba(27,25,38,.24);
  --contour-a:rgba(86,0,234,.10); --contour-b:rgba(11,134,114,.12);
}

/* ── Tokens: dark via OS preference ── */
@media (prefers-color-scheme: dark){
  :root{
    --ground:#131218; --panel:#1b1a23; --panel-2:#232130; --ink:#eceaf2; --ink-2:#aaa4b8; --ink-3:#7b7590;
    --line:#2d2b3a; --line-soft:#26242f; --accent:#a58bff; --accent-soft:#251d3e; --accent-line:#3b2f63;
    --teal:#3fbfa6; --teal-soft:#15291f; --gold:#d4a63f; --gold-soft:#2e2617;
    --good:#3dbd7d; --good-soft:#15291f; --warn:#e0a24e; --warn-soft:#2e2617; --bad:#e0685e; --bad-soft:#331b19;
    --chart-1:#8d6ae8; --chart-2:#1f9d84; --chart-3:#b3872b;
    --cta-bg:#6d3df0; --cta-ink:#fff; --wordmark:#a58bff;
    --rail-bg:#0d0c12; --rail-ink:#8f89a3; --rail-active:#ffffff; --rail-line:#232130;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px -10px rgba(0,0,0,.45);
    --shadow-lg:0 2px 4px rgba(0,0,0,.35),0 24px 60px -24px rgba(0,0,0,.6);
    --contour-a:rgba(165,139,255,.09); --contour-b:rgba(63,191,166,.10);
  }
}

/* ── Explicit toggle beats OS preference, both directions ── */
:root[data-theme="light"]{
  --ground:#f5f7f6; --panel:#ffffff; --panel-2:#edf1ef; --ink:#1b1926; --ink-2:#575264; --ink-3:#8b8699;
  --line:#dfe5e2; --line-soft:#e9edeb; --accent:#5600ea; --accent-soft:#efe9fd; --accent-line:#d8c9f9;
  --teal:#0b8672; --teal-soft:#e2f2ee; --gold:#a97b12; --gold-soft:#f7efdb;
  --good:#1a7f4b; --good-soft:#e2f3e9; --warn:#a05e03; --warn-soft:#faeeda; --bad:#b3352b; --bad-soft:#fae5e3;
  --chart-1:#5600ea; --chart-2:#0b8672; --chart-3:#a97b12;
  --cta-bg:#5600ea; --cta-ink:#fff; --wordmark:#5600ea;
  --rail-bg:#1b1926; --rail-ink:#b9b4c7; --rail-active:#ffffff; --rail-line:#2e2b3d;
  --shadow:0 1px 2px rgba(27,25,38,.05),0 6px 20px -10px rgba(27,25,38,.12);
  --shadow-lg:0 2px 4px rgba(27,25,38,.06),0 24px 60px -24px rgba(27,25,38,.24);
  --contour-a:rgba(86,0,234,.10); --contour-b:rgba(11,134,114,.12);
}
:root[data-theme="dark"]{
  --ground:#131218; --panel:#1b1a23; --panel-2:#232130; --ink:#eceaf2; --ink-2:#aaa4b8; --ink-3:#7b7590;
  --line:#2d2b3a; --line-soft:#26242f; --accent:#a58bff; --accent-soft:#251d3e; --accent-line:#3b2f63;
  --teal:#3fbfa6; --teal-soft:#15291f; --gold:#d4a63f; --gold-soft:#2e2617;
  --good:#3dbd7d; --good-soft:#15291f; --warn:#e0a24e; --warn-soft:#2e2617; --bad:#e0685e; --bad-soft:#331b19;
  --chart-1:#8d6ae8; --chart-2:#1f9d84; --chart-3:#b3872b;
  --cta-bg:#6d3df0; --cta-ink:#fff; --wordmark:#a58bff;
  --rail-bg:#0d0c12; --rail-ink:#8f89a3; --rail-active:#ffffff; --rail-line:#232130;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px -10px rgba(0,0,0,.45);
  --shadow-lg:0 2px 4px rgba(0,0,0,.35),0 24px 60px -24px rgba(0,0,0,.6);
  --contour-a:rgba(165,139,255,.09); --contour-b:rgba(63,191,166,.10);
}

/* ============================================================================
 * Bootstrap bridge — vendored Bootstrap is 5.2.3 (< 5.3), which has NO native
 * data-bs-theme support. We still stamp data-bs-theme on <html> for
 * forward-compat, but the dark re-skin of Bootstrap surfaces has to happen
 * here by re-pointing Bootstrap's CSS variables at brand tokens. ONE place,
 * per spec §3.5. Scope: body ground/ink + the component surfaces the shell
 * and common content pages sit on (cards, tables, dropdowns, modals, form
 * controls, list groups, borders). Full component coverage lands in later
 * waves.
 * ========================================================================== */
body{
  --bs-body-bg:var(--ground);
  --bs-body-color:var(--ink);
  --bs-border-color:var(--line);
  --bs-secondary-color:var(--ink-2);
  --bs-tertiary-color:var(--ink-3);
  --bs-link-color:var(--accent);
  --bs-link-hover-color:var(--accent);
  background-color:var(--ground);
  color:var(--ink);
}
.card{
  --bs-card-bg:var(--panel);
  --bs-card-border-color:var(--line);
  --bs-card-cap-bg:var(--panel-2);
  --bs-card-color:var(--ink);
}
.table{
  --bs-table-bg:transparent;
  --bs-table-color:var(--ink);
  --bs-table-border-color:var(--line);
  --bs-table-striped-bg:var(--panel-2);
  --bs-table-striped-color:var(--ink);
  --bs-table-hover-bg:var(--panel-2);
  --bs-table-hover-color:var(--ink);
}
.dropdown-menu{
  --bs-dropdown-bg:var(--panel);
  --bs-dropdown-color:var(--ink);
  --bs-dropdown-link-color:var(--ink);
  --bs-dropdown-link-hover-bg:var(--panel-2);
  --bs-dropdown-link-hover-color:var(--ink);
  --bs-dropdown-border-color:var(--line);
  --bs-dropdown-divider-bg:var(--line-soft);
  --bs-dropdown-header-color:var(--ink-3);
}
.modal{
  --bs-modal-bg:var(--panel);
  --bs-modal-color:var(--ink);
  --bs-modal-border-color:var(--line);
  --bs-modal-header-border-color:var(--line-soft);
  --bs-modal-footer-border-color:var(--line-soft);
}
.list-group{
  --bs-list-group-bg:var(--panel);
  --bs-list-group-color:var(--ink);
  --bs-list-group-border-color:var(--line);
  --bs-list-group-action-hover-bg:var(--panel-2);
  --bs-list-group-action-hover-color:var(--ink);
}
.accordion{
  --bs-accordion-bg:var(--panel);
  --bs-accordion-color:var(--ink);
  --bs-accordion-border-color:var(--line);
  --bs-accordion-btn-color:var(--ink);
  --bs-accordion-active-bg:var(--accent-soft);
  --bs-accordion-active-color:var(--accent);
}
.form-control,.form-select{
  background-color:var(--panel);
  color:var(--ink);
  border-color:var(--line);
}
.form-control:focus,.form-select:focus{
  background-color:var(--panel);
  color:var(--ink);
}
.form-control::placeholder{color:var(--ink-3);}
.input-group-text{
  background-color:var(--panel-2);
  color:var(--ink-2);
  border-color:var(--line);
}
/* Common utility-class surfaces that hardcode white/light in content pages.
 * Under an explicit or OS dark theme these would glare — repoint at tokens.
 * (Light theme resolves these to near-identical values.) */
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-light{background-color:var(--panel)!important;}
:root[data-theme="dark"] .text-dark{color:var(--ink)!important;}
:root[data-theme="dark"] .border,
:root[data-theme="dark"] .border-bottom,
:root[data-theme="dark"] .border-top{border-color:var(--line)!important;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .bg-white,
  :root:not([data-theme="light"]) .bg-light{background-color:var(--panel)!important;}
  :root:not([data-theme="light"]) .text-dark{color:var(--ink)!important;}
  :root:not([data-theme="light"]) .border,
  :root:not([data-theme="light"]) .border-bottom,
  :root:not([data-theme="light"]) .border-top{border-color:var(--line)!important;}
}

/* --------------------------------------------------------------------------
 * .table-light — django-tables2 stamps this on EVERY <thead> via
 * DJANGO_TABLES2_TABLE_ATTRS (settings.py), so it hits every server-rendered
 * list page. Bootstrap implements it by setting --bs-table-bg/-color on the
 * element, which the .table block above does not reach. Repoint, don't fight:
 * unconditional, because the light tokens resolve to Bootstrap's own values.
 * ------------------------------------------------------------------------ */
.table-light{
  --bs-table-bg:var(--panel-2);
  --bs-table-color:var(--ink);
  --bs-table-border-color:var(--line);
}

/* --------------------------------------------------------------------------
 * AG Grid (ag-theme-alpine, legacy CSS theming — see ag-grid-tables.js).
 * The CDN Alpine stylesheet ships a hardcoded LIGHT palette, so grids stayed
 * white in dark mode no matter what our tokens said. Alpine reads --ag-*
 * custom properties, so we repoint its palette at brand tokens.
 *
 * Dark-only by design: Alpine's light defaults already match our light theme,
 * so overriding there would be churn with no visual gain.
 * ------------------------------------------------------------------------ */
:root[data-theme="dark"] .ag-theme-alpine,
:root[data-theme="dark"].ag-theme-alpine{
  --ag-background-color:var(--panel);
  --ag-foreground-color:var(--ink);
  --ag-data-color:var(--ink);
  --ag-secondary-foreground-color:var(--ink-2);
  --ag-disabled-foreground-color:var(--ink-3);

  --ag-header-background-color:var(--panel-2);
  --ag-header-foreground-color:var(--ink-2);
  --ag-subheader-background-color:var(--panel-2);

  --ag-border-color:var(--line);
  --ag-secondary-border-color:var(--line-soft);
  --ag-row-border-color:var(--line-soft);

  --ag-odd-row-background-color:var(--panel);
  --ag-row-hover-color:var(--panel-2);
  --ag-selected-row-background-color:var(--accent-soft);
  --ag-range-selection-background-color:var(--accent-soft);
  --ag-range-selection-border-color:var(--accent);

  /* Floating surfaces (menus, popups, tooltips) sit ABOVE the grid — they need
   * the raised panel, not the grid background, or they vanish into it. */
  --ag-control-panel-background-color:var(--panel-2);
  --ag-menu-background-color:var(--panel-2);
  --ag-popup-background-color:var(--panel-2);
  --ag-tooltip-background-color:var(--panel-2);
  --ag-panel-background-color:var(--panel-2);

  --ag-input-background-color:var(--panel);
  --ag-input-border-color:var(--line);
  --ag-input-focus-border-color:var(--accent);
  --ag-checkbox-unchecked-color:var(--ink-3);
  --ag-checkbox-checked-color:var(--accent);
  --ag-alpine-active-color:var(--accent);

  --ag-modal-overlay-background-color:rgba(0,0,0,.55);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ag-theme-alpine,
  :root:not([data-theme="light"]).ag-theme-alpine{
    --ag-background-color:var(--panel);
    --ag-foreground-color:var(--ink);
    --ag-data-color:var(--ink);
    --ag-secondary-foreground-color:var(--ink-2);
    --ag-disabled-foreground-color:var(--ink-3);

    --ag-header-background-color:var(--panel-2);
    --ag-header-foreground-color:var(--ink-2);
    --ag-subheader-background-color:var(--panel-2);

    --ag-border-color:var(--line);
    --ag-secondary-border-color:var(--line-soft);
    --ag-row-border-color:var(--line-soft);

    --ag-odd-row-background-color:var(--panel);
    --ag-row-hover-color:var(--panel-2);
    --ag-selected-row-background-color:var(--accent-soft);
    --ag-range-selection-background-color:var(--accent-soft);
    --ag-range-selection-border-color:var(--accent);

    --ag-control-panel-background-color:var(--panel-2);
    --ag-menu-background-color:var(--panel-2);
    --ag-popup-background-color:var(--panel-2);
    --ag-tooltip-background-color:var(--panel-2);
    --ag-panel-background-color:var(--panel-2);

    --ag-input-background-color:var(--panel);
    --ag-input-border-color:var(--line);
    --ag-input-focus-border-color:var(--accent);
    --ag-checkbox-unchecked-color:var(--ink-3);
    --ag-checkbox-checked-color:var(--accent);
    --ag-alpine-active-color:var(--accent);

    --ag-modal-overlay-background-color:rgba(0,0,0,.55);
  }
}