/*
 * -----------------------------------------------------------------------------
 * Icy Math Official Website
 * File: themes.css
 * Description: Light and dark theme variables.
 * -----------------------------------------------------------------------------
 */

html[data-theme="light"] {
  color-scheme: light;

  --page-bg: #f6f7fb;
  --page-bg-2: #edf0ff;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-strong: #ffffff;
  --surface-ghost: rgba(255, 255, 255, 0.58);
  --border: rgba(34, 40, 49, 0.10);
  --border-strong: rgba(34, 40, 49, 0.16);

  --text-primary: #10131a;
  --text-secondary: #474d5b;
  --text-muted: #6c7280;

  --chip-bg: rgba(139, 92, 246, 0.09);
  --chip-border: rgba(139, 92, 246, 0.20);

  --card-bg: rgba(255, 255, 255, 0.82);
  --card-bg-strong: #ffffff;

  --button-primary-bg: linear-gradient(135deg, #7c3aed, #a855f7);
  --button-primary-text: #ffffff;

  --control-bg: rgba(255, 255, 255, 0.76);
  --control-active-bg: rgba(139, 92, 246, 0.18);

  --glow-1: rgba(139, 92, 246, 0.18);
  --glow-2: rgba(59, 130, 246, 0.12);
}

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

  --page-bg: #12131d;
  --page-bg-2: #1a1c2b;
  --surface: rgba(28, 31, 46, 0.84);
  --surface-strong: #1d2130;
  --surface-ghost: rgba(35, 39, 56, 0.64);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text-primary: #f2f4f8;
  --text-secondary: #bfc6d8;
  --text-muted: #9097a7;

  --chip-bg: rgba(139, 92, 246, 0.12);
  --chip-border: rgba(139, 92, 246, 0.20);

  --card-bg: rgba(28, 31, 46, 0.82);
  --card-bg-strong: #1d2130;

  --button-primary-bg: linear-gradient(135deg, #8b5cf6, #a78bfa);
  --button-primary-text: #ffffff;

  --control-bg: rgba(30, 33, 49, 0.84);
  --control-active-bg: rgba(139, 92, 246, 0.18);

  --glow-1: rgba(139, 92, 246, 0.14);
  --glow-2: rgba(59, 130, 246, 0.10);
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at top left, var(--glow-1), transparent 34%),
    radial-gradient(circle at top right, var(--glow-2), transparent 28%),
    linear-gradient(180deg, var(--page-bg), var(--page-bg-2));
  color: var(--text-primary);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at top left, var(--glow-1), transparent 28%),
    radial-gradient(circle at top right, var(--glow-2), transparent 24%),
    linear-gradient(180deg, var(--page-bg), var(--page-bg-2));
  color: var(--text-primary);
}

::selection {
  background: rgba(139, 92, 246, 0.32);
  color: var(--text-primary);
}