/* Smart Dispensation: the single source for palette, geometry and rhythm.
   Components use semantic tokens only; mobile and desktop share these rules. */
:root {
  color-scheme: light;
  background: var(--background);
  color: var(--ink);
  --font-family: "DM Sans", Arial, sans-serif;
  --text-caption: 11px;
  --text-body: 14px;
  --line-height-body: 1.6;
  --control-height: 46px;
  --brand: #102a43;
  --background: #f6f7f1;
  --surface: #ffffff;
  --instrument: #edf1e5;
  --ink: #263128;
  --muted: #62705f;
  --line: #d9dfd2;
  --accent: #dae89d;
  --accent-hover: #c9db83;
  --on-accent: #25301d;
  --tint: #e9eedf;
  --hover: #e4ead9;
  --green: #346d43;
  --red: #9d403c;
  --success-surface: #e6efdf;
  --danger-hover: #f9ebe7;
  --focus: #708b3d;
  --intro-background: #202b22;
  --intro-ink: #f2f4e9;
  --intro-muted: #bdc9b1;
  --backdrop: #10180f99;
  --shadow-color: #14200f18;
  --shadow-soft: 0 8px 32px var(--shadow-color);
  --paper: var(--surface);
  --radius-base: 16px;
  --radius-control: var(--radius-base);
  --radius-card: calc(var(--radius-base) + 8px);
  --radius-dialog: calc(var(--radius-base) + 12px);
  --radius-pill: 999px;
  --radius-circle: 50%;
  --space-unit: 4px;
  --space-xs: calc(var(--space-unit) * 2);
  --space-sm: calc(var(--space-unit) * 3);
  --space-md: calc(var(--space-unit) * 4);
  --space-lg: calc(var(--space-unit) * 6);
  --space-xl: calc(var(--space-unit) * 8);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #101722;
  --surface: #1b2637;
  --instrument: #233248;
  --ink: #eef3fb;
  --muted: #acb9cb;
  --line: #3b4c64;
  --accent: #b7cef7;
  --accent-hover: #a2bfee;
  --on-accent: #172b4a;
  --tint: #2d405b;
  --hover: #314763;
  --green: #a6d9c1;
  --red: #f2b3b1;
  --success-surface: #244039;
  --danger-hover: #443039;
  --focus: #bed7ff;
  --intro-background: #101b2a;
  --intro-ink: #eef3fb;
  --intro-muted: #b0bfd3;
  --backdrop: #060d1999;
  --shadow-color: #00000026;
}