:root {
  color-scheme: light;
  --app-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --app-bg: #f3f6fa;
  --app-surface: #fff;
  --app-surface-muted: #f7f9fc;
  --app-surface-subtle: #fbfcfe;
  --app-header-bg: rgb(255 255 255 / 96%);
  --app-navy: #14243d;
  --app-text: var(--app-navy);
  --app-muted: #5d697a;
  --app-border: #d8e1ec;
  --app-border-strong: #c7d3df;
  --app-divider: #e8edf3;
  --app-on-accent: #fff;

  --app-blue: #286dae;
  --app-blue-hover: #1f5d99;
  --app-blue-bright: #347fc4;
  --app-blue-soft: #e8f2fb;
  --app-turquoise: #159f92;
  --app-turquoise-hover: #0b8f86;
  --app-turquoise-text: #08786d;
  --app-turquoise-soft: #effbf8;
  --app-plum: #8b3f74;
  --app-plum-soft: #f8eaf4;
  --app-plum-border: #d7bad0;

  --app-success: #247453;
  --app-success-soft: #e8f6ef;
  --app-success-border: #a9ded5;
  --app-warning: #8a5b14;
  --app-warning-soft: #fff5db;
  --app-warning-border: #efd49a;
  --app-danger: #94263f;
  --app-error: var(--app-danger);
  --app-danger-soft: #fff0f3;
  --app-danger-border: #f1c4cd;
  --app-info: #286dae;
  --app-info-soft: #e8f2fb;
  --app-info-border: #bfd9ef;
  --app-focus: rgb(40 109 174 / 34%);

  --app-radius-xs: 8px;
  --app-radius-sm: 10px;
  --app-radius: 14px;
  --app-radius-lg: 18px;
  --app-radius-pill: 999px;
  --app-shadow-sm: 0 5px 18px rgb(20 36 61 / 5%);
  --app-shadow: 0 10px 28px rgb(20 36 61 / 6%);
  --app-shadow-lg: 0 18px 44px rgb(20 36 61 / 10%);
  --app-shadow-action: 0 6px 12px rgb(40 109 174 / 20%);
  --app-control-height: 42px;
  --app-content-max: 1280px;
  --app-transition: 150ms ease;

  --app-space-1: 4px;
  --app-space-2: 8px;
  --app-space-3: 12px;
  --app-space-4: 16px;
  --app-space-5: 20px;
  --app-space-6: 24px;
  --app-space-8: 32px;
  --app-space-10: 40px;

  --brand-accent: var(--app-turquoise-text);
  --brand-accent-hover: var(--app-turquoise-hover);
  --brand-accent-soft: var(--app-turquoise-soft);
  --brand-accent-border: var(--app-success-border);
  --brand-focus: rgb(8 120 109 / 22%);
  --brand-shadow: 0 5px 14px rgb(8 120 109 / 20%);
}