/* Semantic palette shared by the PWA and public About page. Media/QR colors are intentional invariants. */
:root {
  color-scheme: light;
  --bg-app: #F5F7F6;
  --bg-surface: #FFFFFF;
  --bg-secondary: #EDF3F1;
  --bg-elevated: #FFFFFF;
  --text-primary: #172321;
  --text-secondary: #596D67;
  --border-default: #DCE6E2;
  --accent-primary: #0B8277;
  --accent-ink: #086B62;
  --accent-hover: #086B62;
  --accent-soft: #DCECE8;
  --on-accent: #FFFFFF;
  --focus-ring: #086B62;
  --danger-text: #A33B3B;
  --danger-soft: #FFF1ED;
  --warning-text: #86502F;
  --warning-soft: #FFF8F2;
  --surface-glass: rgb(255 255 255 / 94%);
  --accent-wash: rgb(11 130 119 / 8%);
  --shadow-color: rgb(15 35 30 / 12%);
  --overlay-scrim: rgb(10 22 28 / 56%);
  --qr-paper: #FFFFFF;
  --media-black: #000000;
  --media-text: #F4F7F6;
  --media-muted: #BED5CB;
  --media-surface: #151C23;
  --media-elevated: #29333D;
  --media-border: #56645F;
  --media-overlay: rgb(0 0 0 / 45%);
  --call-danger: #AE2934;
  --call-accept: #087A66;
  --media-control: rgb(255 255 255 / 12%);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-app: #0C1116;
  --bg-surface: #151C23;
  --bg-secondary: #202932;
  --bg-elevated: #29333D;
  --text-primary: #F4F7F6;
  --text-secondary: #A5B3B1;
  --border-default: #34413F;
  --accent-primary: #13AD96;
  --accent-ink: #43D8BF;
  --accent-hover: #20C3A9;
  --accent-soft: #173D38;
  --on-accent: #071C18;
  --focus-ring: #55DCC5;
  --danger-text: #FFAAA6;
  --danger-soft: #40262B;
  --warning-text: #F2C09D;
  --warning-soft: #392E26;
  --surface-glass: rgb(21 28 35 / 96%);
  --accent-wash: rgb(19 173 150 / 7%);
  --shadow-color: rgb(0 0 0 / 25%);
  --overlay-scrim: rgb(0 0 0 / 65%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
  --bg-app: #0C1116;
  --bg-surface: #151C23;
  --bg-secondary: #202932;
  --bg-elevated: #29333D;
  --text-primary: #F4F7F6;
  --text-secondary: #A5B3B1;
  --border-default: #34413F;
  --accent-primary: #13AD96;
  --accent-ink: #43D8BF;
  --accent-hover: #20C3A9;
  --accent-soft: #173D38;
  --on-accent: #071C18;
  --focus-ring: #55DCC5;
  --danger-text: #FFAAA6;
  --danger-soft: #40262B;
  --warning-text: #F2C09D;
  --warning-soft: #392E26;
  --surface-glass: rgb(21 28 35 / 96%);
  --accent-wash: rgb(19 173 150 / 7%);
  --shadow-color: rgb(0 0 0 / 25%);
  --overlay-scrim: rgb(0 0 0 / 65%);
  }
}
:root {
  --bg: var(--bg-app);
  --surface: var(--bg-surface);
  --surface-soft: var(--bg-secondary);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border-default);
  --accent: var(--accent-primary);
  --danger: var(--danger-text);
  --bubble-in: var(--bg-secondary);
  --bubble-out: var(--accent-primary);
  --t: var(--accent-primary);
  --td: var(--accent-hover);
  --white: var(--bg-surface);
}

/* Product rhythm: shared by compact views and secondary sheets. */
:root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --radius-control: 12px; --radius-panel: 20px; --motion-fast: 140ms; --footer-height: 72px; }