/* ===== Base tokens (light default) ===== */
:root {
  --ep-ink: #0f172a;
  --ep-ink-muted: rgba(15, 23, 42, 0.72);
  --ep-surface: #fff;
  --ep-border: rgba(15, 23, 42, 0.12);
  --ep-chip-bg: rgba(255, 255, 255, 0.85);
  --ep-chip-border: rgba(49, 143, 227, 0.22);
  --ep-chip-ink: rgba(15, 23, 42, 0.88);
  --ep-shadow-1: 0 8px 18px rgba(2, 8, 23, 0.08);
  --ep-blue: #318fe3;
  --ep-gray: #a3a3a3;
  /* ✅ NEW: lighter gray (for subtle borders/text) */
  --ep-gray-light: #dbdbdb;
  --ep-radius: 10px;
  --ep-text-color: #969696;
}

/* ===== Force LIGHT ===== */
:root[data-theme="light"],
body[data-theme="light"] {
  --ep-ink: #0f172a;
  --ep-ink-muted: rgba(15, 23, 42, 0.72);
  --ep-surface: #fff;
  --ep-border: rgba(15, 23, 42, 0.5);
  --ep-chip-bg: rgba(255, 255, 255, 0.85);
  --ep-chip-border: rgba(49, 143, 227, 0.22);
  --ep-chip-ink: rgba(15, 23, 42, 0.88);
  --ep-shadow-1: 0 8px 18px rgba(2, 8, 23, 0.08);
  /* ✅ NEW: lighter gray (light theme) */
  --ep-gray-light: #dbdbdb;
  --ep-text-color: #969696;
}
/* ===== Force DARK ===== */
:root[data-theme="dark"],
body[data-theme="dark"] {
  --ep-ink: rgba(255, 255, 255, 0.92);
  --ep-ink-muted: rgba(255, 255, 255, 0.68);
  --ep-surface: rgba(17, 17, 17, 0.92);
  --ep-border: rgba(255, 255, 255, 0.12);
  --ep-chip-bg: rgba(17, 17, 17, 0.75);
  --ep-chip-border: rgba(49, 143, 227, 0.28);
  --ep-chip-ink: rgba(255, 255, 255, 0.9);
  --ep-shadow-1: 0 10px 24px rgba(0, 0, 0, 0.35);
  /* ✅ NEW: lighter gray (dark theme - a bit brighter for contrast) */
  --ep-gray-light: #dbdbdb;
  --ep-text-color: #969696;
}
/* ===== AUTO (system) فقط وقتی theme="auto" باشه ===== */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"],
  body[data-theme="auto"] {
    --ep-ink: rgba(255, 255, 255, 0.92);
    --ep-ink-muted: rgba(255, 255, 255, 0.68);
    --ep-surface: rgba(17, 17, 17, 0.92);
    --ep-border: rgba(255, 255, 255, 0.12);
    --ep-chip-bg: rgba(17, 17, 17, 0.75);
    --ep-chip-border: rgba(49, 143, 227, 0.28);
    --ep-chip-ink: rgba(255, 255, 255, 0.9);
    --ep-shadow-1: 0 10px 24px rgba(0, 0, 0, 0.35);
    /* ✅ NEW: lighter gray (auto dark) */
    --ep-gray-light: #dbdbdb;
    --ep-text-color: #969696;
  }
}