/* =========================
   THEME TOKENS
   Light is default. Dark is opt-in via html[data-theme="dark"].
   ========================= */

html {
  color-scheme: light;
}

html[data-theme="dark"],
html.theme-dark {
  color-scheme: dark;
}

html[data-theme="light"],
html.theme-light {
  /* Prevent Chrome Auto Dark from re-coloring the light theme. */
  color-scheme: only light;
}

:root {
  /* ===== Base ===== */
  --color-bg: #f6f8fc;
  --color-bg-alt: #ffffff;
  --color-bg-elevated: #ffffff;

  /* ===== Atmosphere ===== */
  --bg-atmosphere:
    radial-gradient(
      900px 420px at 50% -120px,
      rgba(37, 99, 235, 0.09),
      transparent 65%
    );

  /* ===== Borders ===== */
  --color-border: rgba(15, 23, 42, 0.12);
  --color-border-alt: rgba(15, 23, 42, 0.18);

  /* ===== Overlays ===== */
  --color-overlay-backdrop: rgba(2, 6, 23, 0.52);

  /* ===== Text ===== */
  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-text-faint: #64748b;

  /* ===== Accent ===== */
  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-accent-soft: rgba(37, 99, 235, 0.12);
  --color-accent-glow: rgba(37, 99, 235, 0.3);

  /* ===== Status ===== */
  --color-success: #22c55e;
  --color-danger: #ef4444;

  /* ===== Favorites ===== */
  --color-favorite: #fb7185;
  --color-favorite-soft: rgba(251, 113, 133, 0.12);
  --color-favorite-border: rgba(251, 113, 133, 0.45);

  /* ===== Spacing ===== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* ===== Radius ===== */
  --border-radius-sm: 6px;
  --border-radius-md: 10px;
  --border-radius-lg: 14px;
  --border-radius-xl: 20px;

  /* ===== Typography ===== */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --opacity-muted: 0.78;
}

html[data-theme="dark"],
html.theme-dark {
  --color-bg: #0b0f1a;
  --color-bg-alt: #0f172a;
  --color-bg-elevated: #111827;

  --bg-atmosphere:
    radial-gradient(
      900px 420px at 50% -120px,
      rgba(37, 99, 235, 0.22),
      transparent 65%
    );

  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-alt: rgba(255, 255, 255, 0.14);

  --color-overlay-backdrop: rgba(0, 0, 0, 0.72);

  --color-text: #e5e7eb;
  --color-text-muted: #9ca3af;
  --color-text-faint: #6b7280;

  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-accent-soft: rgba(37, 99, 235, 0.18);
  --color-accent-glow: rgba(37, 99, 235, 0.45);

  --color-success: #4ade80;
  --color-danger: #ef4444;

  --color-favorite: #fb7185;
  --color-favorite-soft: rgba(190, 24, 93, 0.24);
  --color-favorite-border: rgba(253, 164, 175, 0.45);

  --opacity-muted: 0.7;
}