/* ============================================================================
   THEMES.CSS — Color tokens for Light & Dark mode
   ----------------------------------------------------------------------------
   Change --accent / --accent-2 here to re-skin the entire site's accent
   color without touching any other file. Light and dark are designed as
   two distinct, intentional palettes (not a simple invert).
   ========================================================================== */

:root {
  /* ---- brand accent (shared across both themes) ---- */
  --accent: #1c8fce;
  --accent-2: #59c9ef;
  --accent-rgb: 28, 143, 206;

  /* ---- radii / shadows / motion shared tokens ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-full: 999px;

  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 12px 32px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.16);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.4s;
  --duration-slow: 0.7s;

  --font-display: "Verdana", Geneva, "Segoe UI", sans-serif;
  --font-body: "Verdana", Geneva, "Segoe UI", sans-serif;
}

/* ---------------------------------------------------------------------
 * LIGHT THEME (default)
 * ------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  --bg: #ffffff;
  --bg-alt: #f7f7fb;
  --bg-elevated: #ffffff;
  --bg-inverse: #0b0f19;

  --text: #14151f;
  --text-muted: #565a6e;
  --text-faint: #8b8fa3;
  --text-on-accent: #ffffff;

  --border: #e6e6ef;
  --border-strong: #d3d3e2;

  --surface-glass: rgba(255, 255, 255, 0.7);
  --surface-glass-border: rgba(255, 255, 255, 0.5);

  --overlay: rgba(11, 15, 25, 0.55);

  --input-bg: #ffffff;

  color-scheme: light;
}

/* ---------------------------------------------------------------------
 * DARK THEME
 * ------------------------------------------------------------------- */
[data-theme="dark"] {
  --bg: #0b0f19;
  --bg-alt: #111726;
  --bg-elevated: #151c2e;
  --bg-inverse: #ffffff;

  --text: #f2f3f7;
  --text-muted: #a6acc2;
  --text-faint: #6c7288;
  --text-on-accent: #ffffff;

  --border: #232a3d;
  --border-strong: #313a52;

  --surface-glass: rgba(21, 28, 46, 0.6);
  --surface-glass-border: rgba(255, 255, 255, 0.08);

  --overlay: rgba(3, 5, 10, 0.7);

  --input-bg: #10162578;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}