/* Shared Classly theme snapshot from frontend/public/tokens.css.
   Keep in sync with the consumer frontend; admin aliases live in admin.css. */
/* Neutral brand palette shared with the admin UI. Status colors carry meaning. */
:root {
  --auth-button-height: 48px;
  --button-radius: 9px;
  color-scheme: light dark;
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink: light-dark(#111111, #f5f5f5);
  --muted: light-dark(#666666, #a3a3a3);
  --accent: light-dark(#111111, #ffffff);
  --accent-hover: light-dark(#333333, #e5e5e5);
  --on-accent: light-dark(#ffffff, #111111);
  --focus: light-dark(#737373, #a3a3a3);
  --canvas: light-dark(#ffffff, #0b0b0b);
  --surface: light-dark(#ffffff, #171717);
  --sidebar: light-dark(#f7f7f7, #111111);
  --soft: light-dark(#eeeeee, #262626);
  --line: light-dark(#e5e5e5, #333333);
  --danger: light-dark(#a54432, #f3a28f);
  --danger-surface: light-dark(#fff4f1, #362621);
  --danger-hover: light-dark(#fce7e0, #4b2f27);
  --danger-border: light-dark(#ecd0c8, #795043);
  --nav-ink: light-dark(#666666, #b3b3b3);
  --nav-hover: light-dark(#eeeeee, #262626);
  --avatar: light-dark(#e5e5e5, #333333);
  --avatar-ink: light-dark(#525252, #d4d4d4);
  --avatar-ring: light-dark(#ffffff88, #525252);
  --avatar-large: light-dark(#e5e5e5, #333333);
  --profile-surface: light-dark(#f5f5f5, #1c1c1c);
  --profile-border: light-dark(#e5e5e5, #404040);
  --pill-surface: light-dark(#ffffffa6, #171717);
  --positive-border: light-dark(#d4d4d4, #525252);
  --help-surface: light-dark(#f5f5f5, #1c1c1c);
  --help-border: light-dark(#e5e5e5, #333333);
  --help-icon: light-dark(#666666, #b3b3b3);
  --help-ink: light-dark(#666666, #b3b3b3);
  --input-border: light-dark(#8a8a8a, #737373);
  --input-hover: light-dark(#525252, #a3a3a3);
  --placeholder: light-dark(#737373, #a3a3a3);
  --switch-border: light-dark(#8a8a8a, #737373);
  --switch-track: light-dark(#8a8a8a, #525252);
  --switch-thumb: light-dark(#ffffff, #f5f5f5);
  --switch-thumb-checked: light-dark(#ffffff, #111111);
  --warning-border: light-dark(#eadac6, #685639);
  --warning-surface: light-dark(#fff9ee, #352d1e);
  --warning-ink: light-dark(#806338, #e0c18c);
  --skeleton: light-dark(#eeeeee, #262626);
  --code-border: light-dark(#8a8a8a, #737373);
  --code-hover: light-dark(#525252, #a3a3a3);
  --code-filled: light-dark(#f5f5f5, #262626);
  --auth-muted: light-dark(#666666, #a3a3a3);
  --auth-story: light-dark(#f0f0f0, #1c1c1c);
  --button-shadow: light-dark(#00000020, #00000033);
  --popover-shadow: light-dark(#00000014, #00000066);
  --avatar-shadow: light-dark(#0000000a, #00000022);
  --input-shadow: light-dark(#00000003, #00000022);
  --code-shadow: light-dark(#00000006, #00000022);
  --dialog-shadow: light-dark(#00000026, #00000088);
  --backdrop: light-dark(#00000066, #000000b3);
  --menu-backdrop: light-dark(#00000055, #00000099);
  --on-toast: light-dark(#ffffff, #111111);
  /* Four-pixel spacing scale; see the verification form guidelines in README. */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}