/* HuiZhi's original web tokens, informed by the two Apple design references.
 * Semantic roles are the public styling API for all present and future pages. */
:root {
  color-scheme: light dark;
  --hz-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --hz-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --hz-canvas: #f5f5f7;
  --hz-surface: #ffffff;
  --hz-surface-secondary: #f0f0f3;
  --hz-field: #ffffff;
  --hz-label: #1d1d1f;
  --hz-secondary: #63636a;
  --hz-placeholder: #73737b;
  --hz-accent: #006edb;
  --hz-business-accent: #d8273f;
  --hz-business-soft: #fff0f2;
  --hz-broadcast-canvas: #080c16;
  --hz-broadcast-label: #f3f5fa;
  --hz-broadcast-muted: #abbad0;
  --hz-broadcast-gold: #ffe4ae;
  --hz-welcome-canvas: #10141e;
  --hz-welcome-label: #f5f5f7;
  --hz-welcome-muted: #c0c7d4;
  --hz-welcome-glow: #263447;
  --hz-on-accent: #ffffff;
  --hz-accent-soft: #e8f1ff;
  --hz-border: #d2d2d7;
  --hz-separator: #e6e6eb;
  --hz-danger: #b42318;
  --hz-warning: #8a5200;
  --hz-success: #247046;
  --hz-glass: rgba(250,250,252,.88);
  --hz-highlight: rgba(255,255,255,.85);
  --hz-scrim: rgba(25,29,38,.35);
  --hz-space-1: .25rem;
  --hz-space-2: .5rem;
  --hz-space-3: .75rem;
  --hz-space-4: 1rem;
  --hz-space-5: 1.5rem;
  --hz-space-6: 2rem;
  --hz-radius-control: .625rem;
  --hz-radius-card: 1rem;
  --hz-radius-dialog: 1.375rem;
  --hz-shadow-card: 0 1px 2px rgba(20,24,32,.03), 0 5px 20px rgba(20,24,32,.035);
  --hz-shadow-dialog: 0 8px 28px rgba(16,22,32,.12), 0 32px 100px rgba(16,22,32,.18);
  --hz-focus: 0 0 0 3px rgba(0,110,219,.22);
  --hz-control-height: 2.625rem;
  --hz-body-size: .875rem;
  --hz-caption-size: .75rem;
  --hz-ease: cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --hz-canvas: #171719;
    --hz-surface: #242426;
    --hz-surface-secondary: #2e2e31;
    --hz-field: #303033;
    --hz-label: #f5f5f7;
    --hz-secondary: #b6b6bd;
    --hz-placeholder: #ababB3;
    --hz-accent: #77b7ff;
    --hz-business-accent: #fb7085;
    --hz-business-soft: #472a32;
    --hz-on-accent: #091629;
    --hz-accent-soft: #23364c;
    --hz-border: #53535b;
    --hz-separator: #3b3b42;
    --hz-danger: #ff8a80;
    --hz-warning: #eec074;
    --hz-success: #80d3a3;
    --hz-glass: rgba(36,36,39,.92);
    --hz-highlight: rgba(255,255,255,.13);
    --hz-scrim: rgba(0,0,0,.55);
    --hz-shadow-card: 0 1px 2px rgba(0,0,0,.12), 0 5px 20px rgba(0,0,0,.09);
    --hz-shadow-dialog: 0 8px 28px rgba(0,0,0,.3), 0 32px 100px rgba(0,0,0,.45);
    --hz-focus: 0 0 0 3px rgba(119,183,255,.28);
  }
}
@media (prefers-contrast: more) {
  :root { --hz-border: var(--hz-secondary); --hz-separator: var(--hz-secondary); }
}