/* SyncBusy design tokens.
 *
 * Canonical brand: cream + coral, from landing.html (main@45bb4ec) plus the approved
 * email-theme decisions of 2026-11-02. Components: static/components.css.
 * Reference copy for mockups (not synced): https://claude.ai/code/artifact/f8bf8f70-9b82-4acc-b71a-785efd420f83
 * GENERATED by scripts/build_design_tokens.py: edit the table there, not this file.
 *
 * Every page loads it, then components.css, with class="sb" on <body>.
 * Rules that matter most:
 *   - accent / success are FILLS. Text in coral or mint uses accent-text / success-text.
 *   - Text on an accent fill is on-accent (dark ink), never white (3.1:1).
 *   - Dark theme: set data-theme="dark" on <html>.
 */

:root,
[data-theme="light"] {
  --bg: #fff6e9;
  --surface: #ffffff;
  --surface-inset: #fff6e9;
  --ink: #0e0e1a;
  --ink-body: #3a3a4c;
  --ink-muted: #5a5a6e;
  --accent: #ff5a3d;
  --accent-hover: #ff6e55;
  --accent-soft: #ffe3da;
  --accent-text: #bf331d;
  --on-accent: #0e0e1a;
  --inverse: #0e0e1a;
  --on-inverse: #fff6e9;
  --success: #1fe291;
  --success-soft: #d8f8e9;
  --success-text: #0e7a4f;
  --on-success: #065f46;
  --warning-soft: #fef3e2;
  --warning-text: #b45309;
  --danger-soft: #fde8e8;
  --danger-text: #c0262d;
  --neutral-soft: #f1eee8;
  --neutral-text: #4a4a5c;
  --border: rgba(31,31,46,0.08);
  --border-mid: rgba(31,31,46,0.14);
  --border-solid: #ebe3d8;
  --border-mid-solid: #e0e0e4;
}

[data-theme="dark"] {
  --bg: #121118;
  --surface: #1d1c24;
  --surface-inset: #26252e;
  --ink: #f5f1ea;
  --ink-body: #d4d2dc;
  --ink-muted: #a3a2b0;
  --accent-soft: #3d1f18;
  --accent-text: #ff8a73;
  --on-accent: #0e0e1a;
  --inverse: #1d1c24;
  --on-inverse: #f5f1ea;
  --success-soft: #12382a;
  --success-text: #5ee3a8;
  --on-success: #065f46;
  --warning-soft: #3a2a12;
  --warning-text: #f5b95c;
  --danger-soft: #3d1a1c;
  --danger-text: #ff8a8f;
  --neutral-soft: #2c2b33;
  --neutral-text: #c9c8d2;
  --border: #2e2d37;
  --border-mid: #3a3944;
  --border-solid: #2e2d37;
  --border-mid-solid: #3a3944;
}

:root {
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-email: Helvetica, Arial, sans-serif;
  --gutter: 1.5rem;
  --gutter-compact: 1.25rem;
  --section-y: 3.5rem;
  --section-y-compact: 2.25rem;
  --card-pad-y: 1.75rem;
  --card-pad-x: 1.5rem;
  --grid-gap: 1.25rem;
  --steps-gap: 1.5rem;
  --cluster-gap: 0.75rem;
  --email-pad: 40px;
  --email-gap: 24px;
  --radius: 12px;
  --radius-icon: 10px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --radius-pill: 100px;
  --container-wide: 1180px;
  --container: 1100px;
  --container-narrow: 760px;
  --measure: 560px;
  --measure-narrow: 440px;
  --email-width: 600px;
  --nav-height: 60px;
  --control-min-height: 48px;

  /* Motion (no token family in the design system; values from landing.html) */
  --duration-color: 0.15s;   /* hover color/background (L63, L69) */
  --duration-disclose: 0.2s; /* FAQ + rotate (L417) */
}