/* The colors and type for everything Groundwork shows: the app, admin and
   the website, which loads this file at /tokens.css. Palette lifted from
   Eric's owner-workspace prototype (PR #1). The values are his; the
   structure is ours, so views reference roles rather than hex codes and the
   dark theme is a token swap. */

:root {
  color-scheme: light;
  --ink: #18271f;
  --muted: #626e65;
  --muted-soft: #626e65;

  --paper: #f7f7f0;
  --surface: rgba(255, 255, 255, 0.72);
  --line: rgba(31, 54, 43, 0.09);

  /* The one Groundwork green, the same as the icon. Roles that want it name
     it, so the dark theme swaps a single value. */
  --green: #175d45;
  --action: var(--green);

  --shadow-card: 0 12px 26px rgba(32, 61, 44, 0.055);
  --shadow-raised: 0 16px 32px rgba(28, 71, 48, 0.08);

  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;

  /* Shell roles. His sketch spelled these as hex in a hundred places; naming
     them is what lets the dark theme below be a swap rather than a rewrite. */
  --nav-hover: #ecf1ed;
  --chip: #eff5f0;
  --chip-ink: var(--green);
  --field: #ffffff;
  --field-line: #ccded2;
  --good-wash: #e4f3e9;
  --good-ink: var(--green);

  --page: #fff;
  --panel: #fff;
  --sidebar: #f8f9f6;
  --subtle: #f5f7f3;
  --bubble: #e9ece6;
  --selected: #e8eee3;
  --selected-line: #dce4d7;
  --control-line: #d5ddd0;
  --link: var(--green);
  --focus: var(--green);
  --on-action: #fff;
  --action-hover: #104631;
  --red: #a44136;
  --red-bg: #faece8;
  --amber: #956024;
  --amber-bg: #fbf1df;
  --blue: #38687e;
  --blue-bg: #edf3f7;
  --chart-output: var(--green);
  --chart-input: #abc7b2;
  --chart-cache: #d9e6d8;
  --chart-track: #edf2e9;
  --chart-fill: #88a68d;
  --backdrop: rgba(24, 39, 31, 0.27);
}

/* Eric's sketch carried a neutral-charcoal dark theme. Same roles, swapped values. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e6ece8;
  --muted: #a0ada4;
  --muted-soft: #a0ada4;

  --paper: #1b201d;
  --surface: rgba(38, 45, 41, 0.72);
  --line: rgba(190, 214, 200, 0.12);

  --shadow-card: 0 12px 26px rgba(0, 0, 0, 0.32);
  --shadow-raised: 0 16px 32px rgba(0, 0, 0, 0.4);

  --nav-hover: #232a26;
  --chip: #232b27;
  --field: #202623;
  --field-line: rgba(190, 214, 200, 0.18);
  --good-wash: rgba(38, 116, 86, 0.24);

  --page: #1b201d;
  --panel: #232a26;
  --sidebar: #181e1a;
  --subtle: #202722;
  --bubble: #2f3632;
  --selected: #293e32;
  --selected-line: #415c4b;
  --control-line: #536259;
  /* Light enough to read on the dark surfaces. */
  --green: #8fd4b3;
  --on-action: #12251b;
  --action-hover: #abe3c8;
  --red: #f0a493;
  --red-bg: #3b2825;
  --amber: #e6be7f;
  --amber-bg: #373023;
  --blue: #9ac9e0;
  --blue-bg: #24343e;
  --chart-input: #5a9175;
  --chart-cache: #36523f;
  --chart-track: #303b33;
  --chart-fill: #80b397;
  --backdrop: rgba(0, 0, 0, 0.6);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  cursor: pointer;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted-soft);
  opacity: 1;
}