/*
 * Onward Africa design tokens.
 *
 * One source for colour, type and spacing across the public site, the client
 * portal, the staff workspace and the administration screens. Four stylesheets
 * used to hold four answers to the same question, which is how the same data
 * ended up wearing two different designs inside one application.
 *
 * Colour is split by job rather than by name. The brand values are kept exactly
 * as recorded in docs/BRAND_GUIDELINES.md and used for graphics and large
 * accents. Anything that has to be READ uses the darkened derivative, because
 * the brand green does not carry text on white.
 *
 * Status colour is a separate family on purpose. Brand green marking a removal
 * would turn the palette into a scoreboard, and an ORM engagement has no score.
 * Every status also carries a shape and a word, so the screens survive
 * monochrome printing and readers who do not separate red from green.
 *
 * Control foregrounds and backgrounds are paired explicitly. Browser checks
 * verify the rendered combinations as well as these token values.
 */

:root {
  /* Preserve the original canvas behind publisher artwork in both themes. */
  --logo-paper: #fff;
  color-scheme: light;

  /* Brand, as recorded. Graphics and large accents only. */
  --oa-green: #00b62a;
  --oa-red: #f21818;
  --oa-near-black: #1e1e1e;

  /* Readable derivatives. These carry text, links and controls. */
  --brand-text: #046b23;
  --brand-deep: #03551b;
  --oa-green-text: #046b23;   /* retained name, older templates use it */
  --oa-green-deep: #03551b;
  --oa-red-text: #a11212;
  --oa-red-deep: #8a0f0f;

  --action-bg: #046b23;
  --action-hover: #03551b;
  --action-ink: #ffffff;

  /* Neutrals, biased a touch green so they read as chosen. */
  --ground: #fbfbfa;
  --surface: #ffffff;
  --surface-2: #f4f5f3;
  --surface-3: #eceee9;
  --ink: #191b19;
  --ink-2: #3f4440;
  --ink-3: #586358;
  --ink-4: #586358;
  --line: #e2e5e1;
  --line-2: #cbd0ca;
  --line-strong: #cbd0ca;

  /* Answer families. Shape and word travel with each of these in the markup. */
  --ok: #046b23;      --ok-bg: #e8f5ec;    --ok-line: #bfe0c9;
  --warn: #8a4b06;    --warn-bg: #fdf1e3;  --warn-line: #eccfa8;
  --stop: #a11212;    --stop-bg: #fdecec;  --stop-line: #eec2c2;
  --wait: #1f3f8f;    --wait-bg: #ecf0fa;  --wait-line: #c4cfe9;
  --grey: #4a4f4c;    --grey-bg: #f0f1ef;  --grey-line: #d6dad5;

  /* Older pill family names, mapped onto the same five. */
  --status-known: var(--ok);         --status-known-bg: var(--ok-bg);
  --status-present: var(--warn);     --status-present-bg: var(--warn-bg);
  --status-unknown: var(--grey);     --status-unknown-bg: var(--grey-bg);
  --status-waiting: var(--wait);     --status-waiting-bg: var(--wait-bg);
  --status-attention: var(--stop);   --status-attention-bg: var(--stop-bg);

  --radius: 5px;
  --radius-lg: 7px;
  --shadow-1: 0 1px 2px rgba(20, 25, 20, 0.06), 0 2px 8px rgba(20, 25, 20, 0.05);
  --shadow-2: 0 6px 24px rgba(20, 25, 20, 0.1);

  --serif: "Noto Serif", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Spacing. Layout sets gaps from this scale; elements do not set margins. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;

  --measure: 66ch;
}

/*
 * A reader who has set their system to dark gets a dark application. The
 * public site keeps its own light-only treatment, which is a deliberate
 * editorial choice rather than an omission.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --oa-green: #3ddc63;
    --brand-text: #6ee08a;
    --brand-deep: #93ecaa;
    --oa-green-text: #6ee08a;
    --oa-green-deep: #93ecaa;
    --oa-red-text: #f08585;
    --oa-red-deep: #f6a5a5;

    --action-bg: #6ee08a;
    --action-hover: #93ecaa;
    --action-ink: #0d1a10;

    --ground: #121412;
    --surface: #1a1d1a;
    --surface-2: #222622;
    --surface-3: #2a2e2a;
    --ink: #eef0ed;
    --ink-2: #c3c8c2;
    --ink-3: #b2bcb2;
    --ink-4: #b2bcb2;
    --line: #2e332e;
    --line-2: #414841;
    --line-strong: #414841;

    --ok: #7fd898;    --ok-bg: #16301e;    --ok-line: #2d5439;
    --warn: #e5a45e;  --warn-bg: #31230f;  --warn-line: #5a4220;
    --stop: #f08585;  --stop-bg: #341818;  --stop-line: #5c2b2b;
    --wait: #93abe8;  --wait-bg: #1a2340;  --wait-line: #31406b;
    --grey: #a8aea7;  --grey-bg: #242724;  --grey-line: #3a3f3a;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.45);
  }
}

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

  --oa-green: #3ddc63;
  --brand-text: #6ee08a;
  --brand-deep: #93ecaa;
  --oa-green-text: #6ee08a;
  --oa-green-deep: #93ecaa;
  --oa-red-text: #f08585;
  --oa-red-deep: #f6a5a5;

  --action-bg: #6ee08a;
  --action-hover: #93ecaa;
  --action-ink: #0d1a10;

  --ground: #121412;
  --surface: #1a1d1a;
  --surface-2: #222622;
  --surface-3: #2a2e2a;
  --ink: #eef0ed;
  --ink-2: #c3c8c2;
  --ink-3: #b2bcb2;
  --ink-4: #b2bcb2;
  --line: #2e332e;
  --line-2: #414841;
  --line-strong: #414841;

  --ok: #7fd898;    --ok-bg: #16301e;    --ok-line: #2d5439;
  --warn: #e5a45e;  --warn-bg: #31230f;  --warn-line: #5a4220;
  --stop: #f08585;  --stop-bg: #341818;  --stop-line: #5c2b2b;
  --wait: #93abe8;  --wait-bg: #1a2340;  --wait-line: #31406b;
  --grey: #a8aea7;  --grey-bg: #242724;  --grey-line: #3a3f3a;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.45);
}