/*
 * Design tokens: the only file allowed to contain color values (tests/test_style.py enforces it).
 * To re-theme, change values here. To add a color, add a token to BOTH the light and dark sets,
 * then use var(--token) wherever it's needed.
 */

/* ---------- light (default) ---------- */
:root {
  /* brand */
  --color-accent: #ea580c;
  --color-accent-strong: #c2410c;
  --color-accent-soft: #ffedd5;
  --color-on-accent: #fff;
  --color-focus-ring: rgb(234 88 12 / 20%);
  --color-accent-glow: rgb(234 88 12 / 18%);
  --color-accent-tint: rgb(234 88 12 / 12%);

  /* surfaces + text */
  --color-bg: #f4f3f2;
  --color-surface: #fff;
  --color-surface-sunken: #f4f3f2;
  --color-text: #1f1c1a;
  --color-text-muted: #736c66;
  --color-border: #e7e3df;
  --color-input-bg: #fff;
  --color-chip: #ece8e4;

  /* status */
  --color-pr: #ca8a04;
  --color-pr-bg: #fef3c7;
  --color-success: #15803d;
  --color-success-bg: #dcfce7;
  --color-danger: #b91c1c;
  --color-danger-bg: #fee2e2;

  /* overlays (rest timer, toast) */
  --color-overlay: #1f1c1a;
  --color-on-overlay: #fff;
  --color-on-overlay-soft: rgb(255 255 255 / 12%);
  --shadow-card: 0 10px 30px rgb(0 0 0 / 8%);
  --shadow-float: 0 6px 20px rgb(0 0 0 / 25%);
  --shadow-sheet: 0 -10px 40px rgb(0 0 0 / 25%);
  --shadow-brand: 0 4px 12px rgb(234 88 12 / 35%);

  /* password strength meter, weakest to strongest */
  --color-strength-0: #dc2626;
  --color-strength-1: #dc2626;
  --color-strength-2: #d97706;
  --color-strength-3: #65a30d;
  --color-strength-4: #16a34a;
  --color-strength-5: #16a34a;

  /* type */
  --font-sans: -apple-system, blinkmacsystemfont, "SF Pro Text", system-ui, sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-num: 19px;

  /* spacing scale */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 20px;
  --space-gutter: 10px;   /* screen-edge margin for cards */

  /* radii */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-sheet: 18px;
  --radius-pill: 19px;

  /* sizes */
  --tap-min: 44px;
  --tap-big: 52px;
  --nav-height: 62px;
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-top: env(safe-area-inset-top);

  color-scheme: light dark;
}

/* ---------- dark ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-accent-soft: #3b2112;
    --color-bg: #121110;
    --color-surface: #1d1b19;
    --color-surface-sunken: #121110;
    --color-text: #ece8e4;
    --color-text-muted: #a39b94;
    --color-border: #2f2b28;
    --color-input-bg: #161413;
    --color-chip: #2a2623;
    --color-pr: #facc15;
    --color-pr-bg: #3a2e0b;
    --color-success: #4ade80;
    --color-success-bg: #12301d;
    --color-danger: #fca5a5;
    --color-danger-bg: #3a1d1d;
  }
}