/* Shared colour tokens for the app and static error pages.
   Use --green for accents; --brand + --on-brand for buttons.
   Large highlighted panels use --feature-surface, neutral grey in dark mode.
   Explicit preferences override the media-query fallback, including without React. */
:root {
  color-scheme: light;
  color: var(--ink);
  background: var(--cream);
  --ink: #17211c;
  --muted: #5f6a63;
  --paper: #fffdf8;
  --cream: #f4f1e9;
  --line: #dcd9ce;
  --green: #184d38;
  --green-hover: #103e2c;
  --green-bright: #b8dc68;
  --red: #a74337;
  --surface-subtle: #f8f6f0;
  --surface-inset: #f5f3ec;
  --surface-control: #fbfaf5;
  --surface-track: #ebe9e1;
  --surface-hover: #eef2e8;
  --surface-selected: #edf4e6;
  --surface-success: #e8f0df;
  --surface-danger: #faeee9;
  --surface-warning: #f7ead7;
  --surface-info: #e3eef3;
  --surface-pending: #edf3db;
  --surface-cancelled: #f3e9e5;
  --surface-disabled: #e8ebe5;
  --ink-secondary: #354139;
  --ink-faint: #8a938d;
  --warning: #754c24;
  --info: #315f78;
  --pending: #5d7224;
  --cancelled: #7d5f59;
  --line-control: #cbcfc8;
  --line-strong: #aeb8b1;
  --line-selected: #99aa99;
  --line-danger: #e3beb7;
  --line-warning: #e8d1ae;
  --chart-grid: #dcddd5;
  --chart-secondary: #5d8467;
  --chart-focus: #0d2f21;
  --chart-record: #91aa52;
  --chart-reference: #aa8241;
  --marker-info: #477b96;
  --marker-warning: #a5783b;
  --marker-pending: #84a941;
  --marker-cancelled: #bda5a0;
  --brand: #184d38;
  --brand-hover: #103e2c;
  --feature-surface: #184d38;
  --feature-raised: #236047;
  --on-brand: #ffffff;
  --on-brand-muted: #c9d5ce;
  --on-bright: #184d38;
  --bright-hover: #c8e98a;
  --danger-fill: #a74337;
  --danger-fill-hover: #8d342b;
  --confirmation: #3c2824;
  --on-confirmation: #dbcac6;
  --line-confirmation: #9d8580;
  --header-background: rgba(244, 241, 233, 0.92);
  --surface-translucent: rgba(255, 253, 248, 0.65);
  --focus-ring: rgba(24, 77, 56, 0.24);
  --shadow: rgba(23, 33, 28, 0.14);
  --shadow-soft: rgba(16, 30, 22, 0.08);
  --brand-overlay: rgba(255, 255, 255, 0.08);
  --brand-line: rgba(255, 255, 255, 0.15);
  --chart-area: rgba(184, 220, 104, 0.18);
  --bright-focus: rgba(184, 220, 104, 0.78);
  --bright-glow: rgba(184, 220, 104, 0.16);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #ededed;
  --muted: #ababab;
  --paper: #1c1c1c;
  --cream: #101010;
  --line: #383838;
  --green: #a8d58c;
  --green-hover: #c4e7ad;
  --red: #f0a399;
  --surface-subtle: #181818;
  --surface-inset: #141414;
  --surface-control: #161616;
  --surface-track: #292929;
  --surface-hover: #303030;
  --surface-selected: #333333;
  --surface-success: #262626;
  --surface-danger: #422923;
  --surface-warning: #40341e;
  --surface-info: #233945;
  --surface-pending: #344021;
  --surface-cancelled: #352c29;
  --surface-disabled: #272727;
  --ink-secondary: #d0d0d0;
  --ink-faint: #a0a0a0;
  --warning: #e6bd7b;
  --info: #9acbe2;
  --pending: #c2d787;
  --cancelled: #cdb4ac;
  --line-control: #656565;
  --line-strong: #858585;
  --line-selected: #89ab7d;
  --line-danger: #93635a;
  --line-warning: #8e754d;
  --chart-grid: #383838;
  --chart-secondary: #79ad89;
  --chart-focus: #e0f6ce;
  --chart-record: #c5db82;
  --chart-reference: #d5ac67;
  --marker-info: #82b5ce;
  --marker-warning: #d5ac67;
  --marker-pending: #b8d778;
  --marker-cancelled: #b79b92;
  --brand: #184532;
  --feature-surface: #242424;
  --feature-raised: #2e2e2e;
  --on-brand-muted: #cccccc;
  --brand-hover: #21583e;
  --header-background: rgba(16, 16, 16, 0.94);
  --surface-translucent: rgba(28, 28, 28, 0.75);
  --focus-ring: rgba(168, 213, 140, 0.5);
  --shadow: rgba(0, 0, 0, 0.35);
  --shadow-soft: rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --ink: #ededed;
    --muted: #ababab;
    --paper: #1c1c1c;
    --cream: #101010;
    --line: #383838;
    --green: #a8d58c;
    --green-hover: #c4e7ad;
    --red: #f0a399;
    --surface-subtle: #181818;
    --surface-inset: #141414;
    --surface-control: #161616;
    --surface-track: #292929;
    --surface-hover: #303030;
    --surface-selected: #333333;
    --surface-success: #262626;
    --surface-danger: #422923;
    --surface-warning: #40341e;
    --surface-info: #233945;
    --surface-pending: #344021;
    --surface-cancelled: #352c29;
    --surface-disabled: #272727;
    --ink-secondary: #d0d0d0;
    --ink-faint: #a0a0a0;
    --warning: #e6bd7b;
    --info: #9acbe2;
    --pending: #c2d787;
    --cancelled: #cdb4ac;
    --line-control: #656565;
    --line-strong: #858585;
    --line-selected: #89ab7d;
    --line-danger: #93635a;
    --line-warning: #8e754d;
    --chart-grid: #383838;
    --chart-secondary: #79ad89;
    --chart-focus: #e0f6ce;
    --chart-record: #c5db82;
    --chart-reference: #d5ac67;
    --marker-info: #82b5ce;
    --marker-warning: #d5ac67;
    --marker-pending: #b8d778;
    --marker-cancelled: #b79b92;
    --brand: #184532;
    --feature-surface: #242424;
    --feature-raised: #2e2e2e;
    --on-brand-muted: #cccccc;
    --brand-hover: #21583e;
    --header-background: rgba(16, 16, 16, 0.94);
    --surface-translucent: rgba(28, 28, 28, 0.75);
    --focus-ring: rgba(168, 213, 140, 0.5);
    --shadow: rgba(0, 0, 0, 0.35);
    --shadow-soft: rgba(0, 0, 0, 0.2);
  }
}