/* commons-web — design tokens. Extracted verbatim from finance-app web/styles.css
   (restructuring Phase 3). Loads BEFORE the app stylesheet, so an app rule of
   equal specificity always wins a tie against anything here. */

/**
 * Design tokens, Phase 0 of the redesign.
 *
 * Lifted from the THEMES constant in design/design-brief-handoff/project/
 * "Redesign Desktop.dc.html" — both maps are the prototype's, not invented here.
 *
 * Why this replaced `color-scheme: light dark` + light-dark():
 * light-dark() resolves from the OS preference, which cannot be overridden from
 * the app. The redesign puts a Dark/Light switch in the account menu, so the
 * theme has to be an attribute the app controls. `color-scheme` is still
 * declared per theme, but now it FOLLOWS our choice rather than driving it —
 * it is what makes form controls, scrollbars and `color-scheme: dark` date
 * pickers render correctly.
 *
 * --ink is a raw "r,g,b" triplet, not a colour. Every hairline, dim label and
 * hover wash is rgba(var(--ink), α) so one variable flips all of them. This is
 * the prototype's own convention and it replaces --line and --soft, which were
 * derived from `currentColor` and therefore changed meaning depending on where
 * they were used.
 */
:root {
  color-scheme: dark;

  --accent: #1a7f5a;

  --bg: #0f0f0f;
  --surface: #181818;
  --surface2: #141414;
  --menu: #1e1e1e;
  --seg: #2a2a2a;
  --navbg: rgba(15, 15, 15, .94);

  --ink: 232, 232, 232;
  --text: #e8e8e8;

  --pos: #6dd58c;
  --neg: #f2938c;
  --warn: #f6c453;
  --blue: #8ab4f8;

  /* Geometry. The two touch sizes are the reason the phone layouts work:
     44px is the minimum tappable control, 62px the minimum list row. */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 14px;
  --radius-sheet: 20px;
  --control-h: 34px;
  --control-h-touch: 44px;
  --row-h-touch: 62px;

  /* Legacy aliases. app.js and the existing markup still use .error, .danger
     and .badge.actual; these keep them working without a JS change in Phase 0.
     --danger maps to --neg deliberately: the prototypes use the same salmon for
     Sign out, Revoke and Leave household as they do for money going out. */
  --danger: var(--neg);
  --info: var(--blue);
}

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

  --bg: #f5f5f2;
  --surface: #ffffff;
  --surface2: #ffffff;
  --menu: #ffffff;
  --seg: #e6e6e0;
  --navbg: rgba(255, 255, 255, .94);

  --ink: 26, 26, 22;
  --text: #1a1a18;

  --pos: #12724c;
  --neg: #bb3a31;
  --warn: #8a6206;
  --blue: #2f6bd0;
}