/*
 * Design tokens shared by the public and account styles. They follow the
 * device appearance; an element with data-theme="light" or "dark" (the
 * development-only appearance override) pins its subtree to one theme.
 * Staff (staff.css) and the Desktop app (desktop/frontend/src/styles.css)
 * mirror these values.
 */
:root,
[data-theme="light"] {
  color-scheme: light;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --surface: #fff;
  --surface-grouped: #f2f2f7;
  --surface-elevated: #fff;
  --fill: rgb(118 118 128 / 0.12);
  --fill-strong: rgb(118 118 128 / 0.2);
  --border: #e5e5ea;
  --fg: #1d1d1f;
  --fg-muted: #6e6e73;
  --accent: #64b6ae;
  --accent-text: #1f7a71;
  --on-accent: #092f2b;
  --accent-tint: rgb(100 182 174 / 0.14);
  --focus-ring: rgb(100 182 174 / 0.28);
  --danger: #be123c;
  --success: #15803d;
  --warning: #92400e;
  --glass: rgb(255 255 255 / 0.72);
  --glass-border: rgb(0 0 0 / 0.07);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px rgb(0 0 0 / 0.06);
  --radius-control: 12px;
  --radius-group: 16px;
  --radius-card: 20px;
  --radius-sheet: 28px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #000;
    --surface-grouped: #000;
    --surface-elevated: #1c1c1e;
    --fill: rgb(118 118 128 / 0.24);
    --fill-strong: rgb(118 118 128 / 0.34);
    --border: #38383a;
    --fg: #f5f5f7;
    --fg-muted: #98989d;
    --accent-text: #7fd0c6;
    --accent-tint: rgb(100 182 174 / 0.2);
    --danger: #fb7185;
    --success: #4ade80;
    --warning: #fde68a;
    --glass: rgb(30 30 32 / 0.66);
    --glass-border: rgb(255 255 255 / 0.1);
    --shadow-card: 0 0 0 1px rgb(255 255 255 / 0.08);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --surface: #000;
  --surface-grouped: #000;
  --surface-elevated: #1c1c1e;
  --fill: rgb(118 118 128 / 0.24);
  --fill-strong: rgb(118 118 128 / 0.34);
  --border: #38383a;
  --fg: #f5f5f7;
  --fg-muted: #98989d;
  --accent-text: #7fd0c6;
  --accent-tint: rgb(100 182 174 / 0.2);
  --danger: #fb7185;
  --success: #4ade80;
  --warning: #fde68a;
  --glass: rgb(30 30 32 / 0.66);
  --glass-border: rgb(255 255 255 / 0.1);
  --shadow-card: 0 0 0 1px rgb(255 255 255 / 0.08);
}