:root {
  color-scheme: light;
}

/* ============================================================
   LIGHT THEME – COOL GLASS / SKY
   ============================================================ */
:root[data-theme="light"] {
  --bg-body: #eaf3ff;
  --bg-body-2: #dfeafd;
  --bg-surface: rgba(255, 255, 255, 0.62);
  --bg-surface-strong: rgba(255, 255, 255, 0.80);
  --bg-surface-soft: rgba(255, 255, 255, 0.46);

  --bg-panel: rgba(255, 255, 255, 0.50);
  --bg-panel-strong: rgba(255, 255, 255, 0.64);
  --bg-panel-hover: rgba(255, 255, 255, 0.74);

  --text-main: #1d304c;
  --text-soft: #425d7b;
  --text-muted: #6b84a0;
  --text-on-accent: #ffffff;

  --accent: #5c8cff;
  --accent-strong: #3d72ef;
  --accent-soft: rgba(92, 140, 255, 0.12);

  --border-soft: rgba(96, 129, 173, 0.18);
  --border-strong: rgba(96, 129, 173, 0.30);

  --shadow-xs: 0 4px 14px rgba(44, 78, 120, 0.06);
  --shadow-sm: 0 8px 22px rgba(44, 78, 120, 0.10);
  --shadow-md: 0 14px 34px rgba(44, 78, 120, 0.14);
  --shadow-lg: 0 22px 52px rgba(44, 78, 120, 0.18);

  --glass-blur: 14px;
  --glass-saturate: 124%;

  --radius-xs: 4px;
  --radius-sm: 5px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;

  --selection-bg: rgba(92, 140, 255, 0.20);
  --selection-text: #16253b;
}

/* ============================================================
   DARK THEME – DEEP BLUE GLASS
   ============================================================ */
:root[data-theme="dark"] {
  --bg-body: #0f1a2a;
  --bg-body-2: #142338;
  --bg-surface: rgba(17, 34, 57, 0.66);
  --bg-surface-strong: rgba(22, 43, 72, 0.82);
  --bg-surface-soft: rgba(15, 29, 48, 0.54);

  --bg-panel: rgba(15, 36, 63, 0.50);
  --bg-panel-strong: rgba(21, 46, 78, 0.66);
  --bg-panel-hover: rgba(27, 56, 93, 0.78);

  --text-main: #eef5ff;
  --text-soft: #c5d5ec;
  --text-muted: #98afcf;
  --text-on-accent: #ffffff;

  --accent: #7aa5ff;
  --accent-strong: #9abbff;
  --accent-soft: rgba(122, 165, 255, 0.14);

  --border-soft: rgba(255, 255, 255, 0.11);
  --border-strong: rgba(255, 255, 255, 0.20);

  --shadow-xs: 0 4px 14px rgba(0, 0, 0, 0.22);
  --shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 16px 38px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.42);

  --glass-blur: 14px;
  --glass-saturate: 124%;

  --radius-xs: 4px;
  --radius-sm: 5px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;

  --selection-bg: rgba(122, 165, 255, 0.24);
  --selection-text: #ffffff;
}

/* ============================================================
   GLOBAL THEME BASICS
   ============================================================ */

html,
body {
  background: var(--bg-body);
  color: var(--text-main);
}

body {
  background-image:
    linear-gradient(
      180deg,
      rgba(246, 250, 255, 0.74) 0%,
      rgba(239, 246, 255, 0.60) 24%,
      rgba(232, 241, 255, 0.52) 52%,
      rgba(238, 245, 255, 0.66) 100%
    ),
    url("../../assets/backgrounds/light-abstract.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

:root[data-theme="dark"] body {
  background-image:
    linear-gradient(
      180deg,
      rgba(7, 15, 27, 0.78) 0%,
      rgba(8, 16, 29, 0.64) 24%,
      rgba(9, 18, 31, 0.56) 52%,
      rgba(7, 14, 25, 0.72) 100%
    ),
    url("../../assets/backgrounds/dark-abstract.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}

a {
  color: var(--text-main);
}

a:hover {
  color: var(--accent-strong);
}