:root,
html[data-theme="light"] {
  --bg-primary: #f6f8fc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f3f9;
  --bg-hover: #e8ebf3;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #94a3b8;
  --border-color: rgba(15, 23, 42, 0.05);
  --border-color-hover: rgba(15, 23, 42, 0.1);
  --accent-primary: #111111;
  --accent-secondary: #2a2a2a;
  --accent-tertiary: #5a5a5a;
  --accent-glow: rgba(0, 0, 0, 0.12);
  --accent-gradient: linear-gradient(135deg, #111111 0%, #3a3a3a 100%);
  --active-bg: #111111;
  --active-text: #ffffff;
  --active-border: #111111;
  --active-ring: rgba(17, 17, 17, 0.14);
  --switch-off-bg: #e8ebf3;
  --switch-off-border: rgba(15, 23, 42, 0.1);
  --switch-off-thumb: #ffffff;
  --switch-on-bg: #111111;
  --switch-on-border: #111111;
  --switch-on-thumb: #ffffff;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 20px 48px rgba(15, 23, 42, 0.12);
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-backdrop: 16px;
  --transition-speed: 0.25s;
  --background-end-color: #383840;
}

html[data-theme="dark"] {
  --bg-primary: #050508;
  --bg-secondary: #0c0d13;
  --bg-tertiary: #131520;
  --bg-hover: #1c1e2e;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-tertiary: #475569;
  --border-color: rgba(255, 255, 255, 0.05);
  --border-color-hover: rgba(255, 255, 255, 0.1);
  --accent-primary: #f2f2f2;
  --accent-secondary: #d9d9d9;
  --accent-tertiary: #a6a6a6;
  --accent-glow: rgba(255, 255, 255, 0.1);
  --accent-gradient: linear-gradient(135deg, #f2f2f2 0%, #bfbfbf 100%);
  --active-bg: #f1f1f1;
  --active-text: #0d0d10;
  --active-border: #f1f1f1;
  --active-ring: rgba(255, 255, 255, 0.26);
  --switch-off-bg: #2a2f3a;
  --switch-off-border: #3a4150;
  --switch-off-thumb: #f3f4f6;
  --switch-on-bg: #f1f1f1;
  --switch-on-border: #f1f1f1;
  --switch-on-thumb: #12141c;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.6);
  --glass-bg: rgba(12, 13, 19, 0.75);
  --glass-border: rgba(255, 255, 255, 0.03);
  --glass-backdrop: 16px;
  --background-end-color: #26262d;
}

html[data-theme="gray"] {
  --bg-primary: #8f969f;
  --bg-secondary: #aab0b8;
  --bg-tertiary: #bec3ca;
  --bg-hover: #ccd1d7;
  --text-primary: #15191f;
  --text-secondary: #3f4650;
  --text-tertiary: #6a737f;
  --border-color: rgba(21, 25, 31, 0.08);
  --border-color-hover: rgba(21, 25, 31, 0.16);
  --accent-primary: #2f343b;
  --accent-secondary: #4b535d;
  --accent-tertiary: #747d89;
  --accent-glow: rgba(47, 52, 59, 0.16);
  --accent-gradient: linear-gradient(135deg, #2f343b 0%, #6e7885 100%);
  --active-bg: #2f343b;
  --active-text: #f7f8fa;
  --active-border: #4b535d;
  --active-ring: rgba(47, 52, 59, 0.22);
  --switch-off-bg: #ccd1d7;
  --switch-off-border: #b2b8c0;
  --switch-off-thumb: #ffffff;
  --switch-on-bg: #2f343b;
  --switch-on-border: #4b535d;
  --switch-on-thumb: #ffffff;
  --shadow-sm: 0 1px 3px rgba(21, 25, 31, 0.08);
  --shadow-md: 0 6px 16px rgba(21, 25, 31, 0.12);
  --shadow-lg: 0 12px 32px rgba(21, 25, 31, 0.16);
  --shadow-xl: 0 20px 48px rgba(21, 25, 31, 0.2);
  --glass-bg: rgba(204, 209, 215, 0.74);
  --glass-border: rgba(255, 255, 255, 0.34);
  --glass-backdrop: 16px;
  --background-end-color: #4b535d;
}

html[data-theme="green"] {
  --bg-primary: #041009;
  --bg-secondary: #07180d;
  --bg-tertiary: #0c2414;
  --bg-hover: #12351d;
  --text-primary: #effff4;
  --text-secondary: #9bd8ad;
  --text-tertiary: #4f815e;
  --border-color: rgba(74, 222, 128, 0.08);
  --border-color-hover: rgba(74, 222, 128, 0.22);
  --accent-primary: #4ade80;
  --accent-secondary: #86efac;
  --accent-tertiary: #bbf7d0;
  --accent-glow: rgba(74, 222, 128, 0.26);
  --accent-gradient: linear-gradient(135deg, #16a34a 0%, #4ade80 58%, #bbf7d0 100%);
  --active-bg: #4ade80;
  --active-text: #031107;
  --active-border: #86efac;
  --active-ring: rgba(74, 222, 128, 0.34);
  --switch-off-bg: #17351f;
  --switch-off-border: #285c38;
  --switch-off-thumb: #d7ffe2;
  --switch-on-bg: #4ade80;
  --switch-on-border: #86efac;
  --switch-on-thumb: #031107;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.52);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.62);
  --glass-bg: rgba(7, 24, 13, 0.78);
  --glass-border: rgba(74, 222, 128, 0.08);
  --glass-backdrop: 16px;
  --background-end-color: #0f5f2d;
}

html[data-theme="sunset"] {
  --bg-primary: #120305;
  --bg-secondary: #1d0608;
  --bg-tertiary: #2b080c;
  --bg-hover: #3d0b11;
  --text-primary: #fff1f2;
  --text-secondary: #f0a6ad;
  --text-tertiary: #9b525b;
  --border-color: rgba(255, 43, 64, 0.1);
  --border-color-hover: rgba(255, 43, 64, 0.26);
  --accent-primary: #ff2b40;
  --accent-secondary: #ff4f5f;
  --accent-tertiary: #ff8a70;
  --accent-glow: rgba(255, 43, 64, 0.34);
  --accent-gradient: linear-gradient(135deg, #ff102a 0%, #ff4f5f 55%, #ff7a45 100%);
  --active-bg: #ff2b40;
  --active-text: #210306;
  --active-border: #ff5c6d;
  --active-ring: rgba(255, 43, 64, 0.42);
  --switch-off-bg: #410910;
  --switch-off-border: #64101a;
  --switch-off-thumb: #ffd7dc;
  --switch-on-bg: #ff2b40;
  --switch-on-border: #ff5c6d;
  --switch-on-thumb: #210306;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.52);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.62);
  --glass-bg: rgba(24, 12, 11, 0.78);
  --glass-border: rgba(255, 132, 91, 0.08);
  --glass-backdrop: 16px;
  --background-end-color: #7b0d19;
}

html[data-theme="yellow"] {
  --bg-primary: #080704;
  --bg-secondary: #111007;
  --bg-tertiary: #1d1808;
  --bg-hover: #2b240b;
  --text-primary: #fff8db;
  --text-secondary: #d8bd6a;
  --text-tertiary: #8f7630;
  --border-color: rgba(255, 211, 61, 0.09);
  --border-color-hover: rgba(255, 211, 61, 0.22);
  --accent-primary: #ffd33d;
  --accent-secondary: #ffe27a;
  --accent-tertiary: #fff0a8;
  --accent-glow: rgba(255, 211, 61, 0.28);
  --accent-gradient: linear-gradient(135deg, #ffbf1f 0%, #ffd33d 52%, #fff0a8 100%);
  --active-bg: #ffd33d;
  --active-text: #171104;
  --active-border: #ffe27a;
  --active-ring: rgba(255, 211, 61, 0.36);
  --switch-off-bg: #33290b;
  --switch-off-border: #594612;
  --switch-off-thumb: #fff2b8;
  --switch-on-bg: #ffd33d;
  --switch-on-border: #ffe27a;
  --switch-on-thumb: #171104;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.52);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.62);
  --glass-bg: rgba(17, 16, 7, 0.78);
  --glass-border: rgba(255, 211, 61, 0.08);
  --glass-backdrop: 16px;
  --background-end-color: #7a5a08;
}

html[data-theme="purple"] {
  --bg-primary: #0c0712;
  --bg-secondary: #160d20;
  --bg-tertiary: #22142f;
  --bg-hover: #302044;
  --text-primary: #fbf5ff;
  --text-secondary: #c7add8;
  --text-tertiary: #806094;
  --border-color: rgba(192, 132, 252, 0.09);
  --border-color-hover: rgba(192, 132, 252, 0.22);
  --accent-primary: #c084fc;
  --accent-secondary: #d8b4fe;
  --accent-tertiary: #f0d9ff;
  --accent-glow: rgba(192, 132, 252, 0.28);
  --accent-gradient: linear-gradient(135deg, #8b5cf6 0%, #c084fc 58%, #f0abfc 100%);
  --active-bg: #c084fc;
  --active-text: #12071f;
  --active-border: #d8b4fe;
  --active-ring: rgba(192, 132, 252, 0.34);
  --switch-off-bg: #2b1a3c;
  --switch-off-border: #4b2a68;
  --switch-off-thumb: #ead8ff;
  --switch-on-bg: #c084fc;
  --switch-on-border: #d8b4fe;
  --switch-on-thumb: #12071f;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.52);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.62);
  --glass-bg: rgba(22, 13, 32, 0.78);
  --glass-border: rgba(192, 132, 252, 0.08);
  --glass-backdrop: 16px;
  --background-end-color: #4b2494;
}

html[data-theme="midnight"] {
  --bg-primary: #050914;
  --bg-secondary: #08101f;
  --bg-tertiary: #0d1830;
  --bg-hover: #142545;
  --text-primary: #eef7ff;
  --text-secondary: #9fb7d7;
  --text-tertiary: #536d91;
  --border-color: rgba(125, 183, 255, 0.08);
  --border-color-hover: rgba(125, 183, 255, 0.2);
  --accent-primary: #7db7ff;
  --accent-secondary: #9fc9ff;
  --accent-tertiary: #c8e0ff;
  --accent-glow: rgba(125, 183, 255, 0.22);
  --accent-gradient: linear-gradient(135deg, #4f8fe8 0%, #8fd0ff 100%);
  --active-bg: #7db7ff;
  --active-text: #06111f;
  --active-border: #9fc9ff;
  --active-ring: rgba(125, 183, 255, 0.32);
  --switch-off-bg: #172642;
  --switch-off-border: #263d65;
  --switch-off-thumb: #c8e0ff;
  --switch-on-bg: #7db7ff;
  --switch-on-border: #9fc9ff;
  --switch-on-thumb: #06111f;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.52);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.62);
  --glass-bg: rgba(8, 16, 31, 0.78);
  --glass-border: rgba(125, 183, 255, 0.08);
  --glass-backdrop: 16px;
  --background-end-color: #143e78;
}

@font-face {
  font-family: 'CustomFont1';
  src: url('../fonts/font-1.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --site-font: 'CustomFont1', system-ui, -apple-system, sans-serif;
}

html[data-site-font="inter"] {
  --site-font: 'Inter', system-ui, -apple-system, sans-serif;
}

html[data-site-font="outfit"] {
  --site-font: 'Outfit', system-ui, -apple-system, sans-serif;
}

html[data-site-font="poppins"] {
  --site-font: 'Poppins', system-ui, -apple-system, sans-serif;
}

html[data-site-font="nunito"] {
  --site-font: 'Nunito', system-ui, -apple-system, sans-serif;
}

html[data-site-font="montserrat"] {
  --site-font: 'Montserrat', system-ui, -apple-system, sans-serif;
}

html[data-site-font="rubik"] {
  --site-font: 'Rubik', system-ui, -apple-system, sans-serif;
}

html[data-site-font="dmsans"] {
  --site-font: 'DM Sans', system-ui, -apple-system, sans-serif;
}

html[data-site-font="manrope"] {
  --site-font: 'Manrope', system-ui, -apple-system, sans-serif;
}

html[data-site-font="kanit"] {
  --site-font: 'Kanit', system-ui, -apple-system, sans-serif;
}

html[data-site-font="spacegrotesk"] {
  --site-font: 'Space Grotesk', system-ui, -apple-system, sans-serif;
}

html[data-site-font="exo2"] {
  --site-font: 'Exo 2', system-ui, -apple-system, sans-serif;
}

html[data-site-font="custom1"] {
  --site-font: 'CustomFont1', system-ui, -apple-system, sans-serif;
}

html[data-site-font="mono"] {
  --site-font: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--site-font);
}

body *:not(svg):not(path) {
  font-family: var(--site-font) !important;
}

*, body, html {
  transition: background-color var(--transition-speed) cubic-bezier(0.25, 0.8, 0.25, 1),
              color var(--transition-speed) cubic-bezier(0.25, 0.8, 0.25, 1),
              border-color var(--transition-speed) cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow var(--transition-speed) cubic-bezier(0.25, 0.8, 0.25, 1);
}

html.prevent-transition,
html.prevent-transition * {
  transition: none !important;
}

.theme-toggle-btn {
  position: relative;
  overflow: hidden;
}

.theme-toggle-btn .moon-icon,
.theme-toggle-btn .sun-icon,
.theme-toggle-btn .gray-icon,
.theme-toggle-btn .green-icon,
.theme-toggle-btn .sunset-icon,
.theme-toggle-btn .yellow-icon,
.theme-toggle-btn .purple-icon,
.theme-toggle-btn .midnight-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg) scale(0.58);
  transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html:not([data-theme]) .theme-toggle-btn .sun-icon,
html[data-theme="light"] .theme-toggle-btn .sun-icon,
html[data-theme="dark"] .theme-toggle-btn .moon-icon,
html[data-theme="gray"] .theme-toggle-btn .gray-icon,
html[data-theme="green"] .theme-toggle-btn .green-icon,
html[data-theme="sunset"] .theme-toggle-btn .sunset-icon,
html[data-theme="yellow"] .theme-toggle-btn .yellow-icon,
html[data-theme="purple"] .theme-toggle-btn .purple-icon,
html[data-theme="midnight"] .theme-toggle-btn .midnight-icon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}