/* css/theme.css */

/* =========================
   Base Theme (Light)
========================= */
:root {
  /* Backgrounds */
  --color-bg: #f6f6f5;
  --color-surface: #ffffff;
  --color-surface-2: #f0f0f0;

  /* Borders */
  --color-border: #e6e6e6;
  --color-border-strong: #d4d4d4;

  /* Text */
  --color-text: #1c1c1c;
  --color-text-muted: #6b6b6b;

  /* Brand / Accent */
  --color-accent: #4b019e;
  --color-accent-hover: #3b007d;

  /* States */
  --color-success: #1f9d55;
  --color-warning: #d97706;
  --color-error: #dc2626;

  /* UI */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.08);

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
}

/* =========================
   Dark Theme
========================= */
html.dark {
  /* Backgrounds */
  --color-bg: #1e1e1e;
  --color-surface: #252525;
  --color-surface-2: #2e2e2e;

  /* Borders */
  --color-border: #363636;
  --color-border-strong: #4a4a4a;

  /* Text */
  --color-text: #f0f0f0;
  --color-text-muted: #a0a0a0;

  /* Brand / Accent */
  --color-accent: #9b4dff;
  --color-accent-hover: #b07aff;

  /* States */
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-error: #f87171;

  /* UI */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* =========================
   Global Defaults
========================= */

body {
  background: var(--color-bg);
  color: var(--color-text);
  transition: background var(--transition-normal),
              color var(--transition-normal);
}

* {
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}