/*
  IDG Pocket Edition admin — palette.

  MIRRORS apps/web/assets/site.css, which mirrors the app's lib/theme.dart.
  Three surfaces, one set of values; keep them in step when a colour changes.

  The five dimension colours are the brand and are IDENTICAL in light and dark
  (docs/product/BRAND.md). They are here only as the five marks in the corner —
  the console never tints a surface with one, because using one would read as
  favouring that dimension, which is the same reasoning that governs the app's
  own appearance control.

  Appearance: Auto follows the OS; [data-theme] on :root pins Light or Dark and
  wins in both directions (the console's toggle, persisted in localStorage).
*/
:root {
  --being: #d4b88c;
  --thinking: #e585a1;
  --relating: #ef4136;
  --collaborating: #ff7e2a;
  --acting: #661a30;

  --bg: #FAF7F5;
  --surface: #FFFFFF;
  --ink: #141210;
  --ink-soft: rgba(20, 18, 16, 0.66);
  --ink-faint: rgba(20, 18, 16, 0.45);
  --divider: rgba(20, 18, 16, 0.1);

  /* Console-only roles the marketing pages never need. */
  --accent: #661a30;          /* Acting — the darkest of the five, so it is the
                                 one that can carry white text at any size */
  --on-accent: #FFFFFF;
  --wash: rgba(102, 26, 48, 0.08);
  --shadow: rgba(20, 18, 16, 0.06);
  --danger: #C0392B;
  --on-danger: #FFFFFF;
  --ok: #2E7D5B;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17130F;
    --surface: #221D18;
    --ink: #F5F0EA;
    --ink-soft: rgba(245, 240, 234, 0.68);
    --ink-faint: rgba(245, 240, 234, 0.46);
    --divider: rgba(255, 255, 255, 0.12);

    /* Acting at #661a30 is unreadable on a dark ground, so the accent role
       moves to Thinking — the brand colours themselves do not change, but
       WHICH of them plays a chrome role can. */
    --accent: #e585a1;
    --on-accent: #17130F;
    --wash: rgba(229, 133, 161, 0.12);
    --shadow: rgba(0, 0, 0, 0.35);
    --danger: #E08B76;
    --on-danger: #17130F;
    --ok: #8FCB9F;
  }
}

:root[data-theme="dark"] {
  --bg: #17130F;
  --surface: #221D18;
  --ink: #F5F0EA;
  --ink-soft: rgba(245, 240, 234, 0.68);
  --ink-faint: rgba(245, 240, 234, 0.46);
  --divider: rgba(255, 255, 255, 0.12);
  --accent: #e585a1;
  --on-accent: #17130F;
  --wash: rgba(229, 133, 161, 0.12);
  --shadow: rgba(0, 0, 0, 0.35);
  --danger: #E08B76;
  --on-danger: #17130F;
  --ok: #8FCB9F;
}