/*
 * Design tokens sourced from the AAC brand style guide (Google Doc).
 * Colors and fonts anywhere in this project should reference these
 * variables instead of hardcoding hex values or font names, so a future
 * palette/font change only has to happen here.
 */
:root {
  /* Primary palette */
  --color-orange: #f7901e;
  --color-plum: #532541;
  --color-teal: #009dbe;
  --color-cream: #f4e5d8;

  /* Secondary palette (paired with the primaries above) */
  --color-orange-secondary: #cc700e;
  --color-plum-secondary: #21150d;
  --color-teal-secondary: #00beda;
  --color-cream-secondary: #f7ede3;

  /* Font families */
  --font-title: 'Ultra', serif;
  --font-subtitle: 'Oswald', sans-serif;
  --font-body: 'Open Sans', sans-serif;

  /* Type scale (rem, so it scales with the user's browser font-size setting;
     values assume the default 1rem = 16px root). */
  --text-title: 1.625rem;   /* 26px */
  --text-subtitle: 1.125rem; /* 18px */
  --text-h1: 1.125rem;      /* 18px */
  --text-h2: 1rem;          /* 16px */
  --text-h3: 0.875rem;      /* 14px */
  --text-body: 0.6875rem;   /* 11px */

  /* Weights */
  --weight-subtitle: 400;
  --weight-heading: 400;
  --weight-body: 400;
  --weight-body-highlight: 600;

  /* Layout — the standard centred content column, shared by every page's
     `.page-wrap` and by `.subnav-inner` (base.html) so a title lines up over its
     content. The single source of truth for column width: edit here to retune the
     whole app. Full-viewport pages opt out via `.page-wrap--full`. */
  --content-max: 68rem;   /* 1088px */

  /* There is deliberately no navbar-clearance token here. The navbar is
     `position: sticky` and stays in normal flow (base.html), so it occupies its
     own height and the content below is offset by the browser — correct at any
     bar height, including when the tiles wrap to two or three rows. This
     replaced three hand-tuned scalars (--nav-clear-primary/-subnav/-stacked)
     that every page had to pick between: a fixed bar's height is content-driven
     and cannot be guessed, so at narrow widths the subnav sat on top of the
     page. Don't reintroduce one — if content is being covered, the navbar has
     been taken out of flow again.

     Breakpoints. CSS custom properties can't be used inside a media query, so
     the scale is a convention rather than a token; these are the app-wide
     values in use, and a new rule should reach for one of them rather than
     inventing another:
       1344px — the subnav's gutter layout (derived from --content-max plus room
                for the Back button; base.html)
       1000px — the AI-chat rail collapses / overlays
        768px — the feedback modal goes single-column
        700px — the app-wide "mobile" tier for page content
        669px — the candidates pagination row stacks (index.html)
     The navbar has twelve more of its own, between 1750px and 610px. They are
     deliberately not listed here: each is measured against the width of one
     specific control, so they mean nothing outside that ladder and reusing one
     elsewhere would couple an unrelated layout to it. See the comment above
     them in base.html. */
}

/*
 * Semantic tokens — the layer templates should actually consume. Each maps a
 * *role* (page background, body text, primary accent, a danger panel, …) onto
 * the raw brand primitives above, and is redefined per theme so the same
 * role resolves to the right value in light vs dark. Templates reference these
 * (e.g. `background: var(--surface)`), never a raw `--color-*` or a bare hex,
 * so a theme is entirely described here.
 *
 * Theme resolution (OS preference + manual toggle both honored):
 *   :root                         -> light (the official-site look; the default)
 *   @media (prefers-color-scheme: dark) :root:not([data-theme="light"])
 *                                 -> dark when the OS asks and the user hasn't
 *                                    explicitly forced light
 *   :root[data-theme="dark"]      -> manual dark, wins over an OS light pref
 * The manual toggle stamps data-theme on <html> (see base.html); localStorage
 * persists the choice and a pre-paint script applies it before first paint.
 */
:root {
  /* Light theme (default) — white page, plum ink, teal/orange accents. */
  --bg: #ffffff;
  --surface: #faf6f1;            /* panels, inputs, table header */
  --surface-2: var(--color-cream);
  --surface-hover: #f7ede3;      /* table row hover */
  --text: var(--color-plum-secondary);
  --text-muted: #6b5b52;
  --text-faint: #a89a8f;         /* null/placeholder */
  --heading: var(--color-plum);
  --border: #e4d8c9;             /* hairlines, cell borders */
  --border-strong: #cbb9a6;      /* button/input borders */

  --accent: var(--color-teal);           /* primary action / links / focus */
  --accent-hover: var(--color-teal-secondary);
  --accent-contrast: #ffffff;            /* text/icon on an accent fill */
  --accent-2: var(--color-orange);       /* secondary highlight */
  --accent-2-hover: var(--color-orange-secondary);

  /* Link hover — plain content/nav links warm to primary orange on hover,
     matching the official site. */
  --link-hover: var(--color-orange);

  /* Buttons — the official-site two-button system. A solid primary CTA
     (orange, warming to the darker secondary orange on hover) and a solid
     secondary action (dark plum, warming to primary plum on hover); both
     carry white text. Destructive actions keep the `--danger` family instead. */
  --btn-primary-bg: var(--color-orange);
  --btn-primary-bg-hover: var(--color-orange-secondary);
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: var(--color-plum-secondary);   /* #21150d */
  --btn-secondary-bg-hover: var(--color-plum);
  --btn-secondary-text: #ffffff;

  /* Signal colors — kept as their own hues in both themes; only lightness is
     tuned per theme. Not part of the brand palette. */
  --danger: #b03030;
  --danger-bg: #fbeaea;
  --danger-border: #e3b4b4;
  --success: #1f7a3d;
  --success-bg: #e6f4ea;
  --success-border: #a9d6ba;
  --warning: #9a6a12;
  --warning-bg: #fbf1dd;
  --warning-border: #e6cf9a;
  /* The availability score's badge. Its own hue rather than a reuse of
     --success, because the shared hiring-manager view already spends green on
     the manager's own score and the two sit side by side in that table. */
  --info: #5b4a9e;
  --info-bg: #eeebf8;
  --info-border: #bfb4e0;

  /* Chart / data-viz roles — the single place to retune chart colours app-wide.
     They resolve through the semantic tokens above, so they stay theme-aware
     from this one definition (no need to redefine them per theme). Point them at
     other tokens or raw values here to recolour every chart. */
  --chart-bar: var(--accent);        /* column-chart bar fill */
  --chart-ring: var(--accent);       /* ring-gauge progress arc */
  --chart-track: var(--border);      /* ring-gauge empty track */

  /* Map roles (world maps, `static/js/world_map.js`). Unlike the three above
     these are literal values, not references: a sequential ramp needs steps
     picked against the surface it sits on, so each theme carries its own.
     Keep both dark blocks below in sync when retuning.

     `--chart-seq-*` is the country choropleth's ramp: one hue (teal, the accent
     family), monotone light -> dark, five steps for five count bins. Validated
     against the card surface -- the light end clears 2:1 on it, and every
     adjacent pair is a visible lightness step. */
  --chart-seq-1: #45b2ca;
  --chart-seq-2: #2196b1;
  --chart-seq-3: #0c7c96;
  --chart-seq-4: #0f6076;
  --chart-seq-5: #12475a;
  /* A second ramp, in the brand's other primary (orange), for a chart needing
     more ordered steps than one hue can carry: ten monotone steps of a single
     hue would fall below the lightness gap that keeps neighbours apart, so past
     five the donut switches family rather than subdividing. Validated on the
     card surface exactly like the teal ramp above. */
  --chart-alt-1: #e6963d;
  --chart-alt-2: #cd7a1a;
  --chart-alt-3: #a86212;
  --chart-alt-4: #7f4a0f;
  --chart-alt-5: #59330b;
  --chart-geo-empty: #e7ddd0;        /* land with no candidates */
  --chart-geo-stroke: #f7ede3;       /* country hairline = the surface colour,
                                        so fills read as separated, not merged */
  /* The region map's land tints. Three deliberately low-chroma steps, assigned
     so no two neighbouring regions share one (the four-colour-map trick) --
     they mark extent only. All magnitude is carried by the bubbles, so these
     must stay quiet enough that no region looks "bigger" than another. */
  --chart-region-1: #e9dbc9;
  --chart-region-2: #dbc9b1;
  --chart-region-3: #cbb69a;
  --chart-region-hover: #b8a084;     /* the whole hovered region, tinted as one */
  --chart-bubble: #cc700e;           /* proportional region bubble */
  --chart-bubble-ring: #f7ede3;      /* surface ring, so overlapping bubbles read apart */
}

/* Dark when the OS asks for it and the user hasn't forced light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f0f0f;
    --surface: #1a1a1a;
    --surface-2: #222222;
    --surface-hover: #161616;
    --text: #e0e0e0;
    --text-muted: #888888;
    --text-faint: #555555;
    --heading: var(--color-cream);   /* cream, not plum: plum reads poorly on dark */
    --border: #333333;
    --border-strong: #555555;

    --accent: var(--color-teal-secondary);
    --accent-hover: #4fd4ea;
    --accent-contrast: #0f0f0f;
    --accent-2: var(--color-orange);
    --accent-2-hover: #ffab4d;

    --link-hover: var(--color-orange);

    /* On the near-black page #21150d reads too dark, so the secondary button
       lifts to primary plum (hovering to the darker #21150d). */
    --btn-primary-bg: var(--color-orange);
    --btn-primary-bg-hover: var(--color-orange-secondary);
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: var(--color-plum);
    --btn-secondary-bg-hover: var(--color-plum-secondary);
    --btn-secondary-text: #ffffff;

    --danger: #e08080;
    --danger-bg: #1f0a0a;
    --danger-border: #7a2020;
    --success: #7fdfa0;
    --success-bg: #16351f;
    --success-border: #2f6b41;
    --warning: #f0c453;
    --warning-bg: #4a3510;
    --warning-border: #7a5b1a;
    /* Lifted well off the light value (#5b4a9e): a mid purple that reads on
       cream disappears into #0f0f0f. */
    --info: #b3a5ea;
    --info-bg: #221c3d;
    --info-border: #4a3f7a;

    /* Map roles — the ramp flips anchor for a dark surface (dim = few, bright
       = many) rather than being reused from light, and the dim end still
       clears 2:1 on the card so the lowest bin doesn't vanish into the page. */
    --chart-seq-1: #1d5666;
    --chart-seq-2: #17798f;
    --chart-seq-3: #0f9cba;
    --chart-seq-4: #45c3dc;
    --chart-seq-5: #8ae3f2;
  --chart-alt-1: #6b450f;
  --chart-alt-2: #96601a;
  --chart-alt-3: #c07d20;
  --chart-alt-4: #e59d3c;
  --chart-alt-5: #f7bd72;
    --chart-alt-1: #6b450f;
    --chart-alt-2: #96601a;
    --chart-alt-3: #c07d20;
    --chart-alt-4: #e59d3c;
    --chart-alt-5: #f7bd72;
    --chart-geo-empty: #232323;
    --chart-geo-stroke: #161616;
    --chart-region-1: #262c2f;
    --chart-region-2: #333c40;
    --chart-region-3: #414d52;
  --chart-region-hover: #55636a;
    --chart-region-hover: #55636a;
    --chart-bubble: var(--color-orange);
    --chart-bubble-ring: #161616;
  }
}

/* Manual dark override — wins over an OS light preference. Values mirror the
   media-query block above. */
:root[data-theme="dark"] {
  --bg: #0f0f0f;
  --surface: #1a1a1a;
  --surface-2: #222222;
  --surface-hover: #161616;
  --text: #e0e0e0;
  --text-muted: #888888;
  --text-faint: #555555;
  --heading: var(--color-cream);
  --border: #333333;
  --border-strong: #555555;

  --accent: var(--color-teal-secondary);
  --accent-hover: #4fd4ea;
  --accent-contrast: #0f0f0f;
  --accent-2: var(--color-orange);
  --accent-2-hover: #ffab4d;

  --link-hover: var(--color-orange);

  --btn-primary-bg: var(--color-orange);
  --btn-primary-bg-hover: var(--color-orange-secondary);
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: var(--color-plum);
  --btn-secondary-bg-hover: var(--color-plum-secondary);
  --btn-secondary-text: #ffffff;

  --danger: #e08080;
  --danger-bg: #1f0a0a;
  --danger-border: #7a2020;
  --success: #7fdfa0;
  --success-bg: #16351f;
  --success-border: #2f6b41;
  --warning: #f0c453;
  --warning-bg: #4a3510;
  --warning-border: #7a5b1a;
  --info: #b3a5ea;
  --info-bg: #221c3d;
  --info-border: #4a3f7a;

  --chart-seq-1: #1d5666;
  --chart-seq-2: #17798f;
  --chart-seq-3: #0f9cba;
  --chart-seq-4: #45c3dc;
  --chart-seq-5: #8ae3f2;
  --chart-geo-empty: #232323;
  --chart-geo-stroke: #161616;
  --chart-region-1: #262c2f;
  --chart-region-2: #333c40;
  --chart-region-3: #414d52;
  --chart-bubble: var(--color-orange);
  --chart-bubble-ring: #161616;
}