/* ======================================================
   THEME SYSTEM — dəyişənlər, dark/light rejim, animasiyalar
   Bütün səhifələr bu faylı ilk növbədə çağırır.
====================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');

:root{
  --bg: #faf6f7;
  --bg-soft: #fdeef1;
  --surface: #ffffff;
  --surface-2: #fff5f7;
  --text: #241a1d;
  --text-muted: #7c6a6f;
  --border: #f1e2e6;

  --primary: #c81d45;
  --primary-dark: #9c1636;
  --primary-light: #ff5c7f;
  --primary-soft: #ffe1e8;
  --gradient: linear-gradient(135deg, #ff5c7f 0%, #c81d45 60%, #8f1233 100%);

  --success-bg: #e8f9ee;
  --success-text: #1a9c4b;
  --danger-bg: #ffeaea;
  --danger-text: #e0294a;

  --shadow-sm: 0 2px 10px rgba(155, 24, 60, 0.07);
  --shadow-md: 0 10px 26px rgba(155, 24, 60, 0.12);
  --shadow-lg: 0 18px 44px rgba(155, 24, 60, 0.18);

  --header-bg: rgba(255, 255, 255, 0.82);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --font-body: 'Poppins', Arial, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
}

[data-theme="dark"]{
  --bg: #17111a;
  --bg-soft: #1e151c;
  --surface: #241a20;
  --surface-2: #2b1e26;
  --text: #f6ecef;
  --text-muted: #b39ba3;
  --border: #3a2830;

  --primary: #ff5c81;
  --primary-dark: #ff3f6c;
  --primary-light: #ff96b1;
  --primary-soft: #3a1c26;
  --gradient: linear-gradient(135deg, #ff96b1 0%, #ff5c81 55%, #9c1636 100%);

  --success-bg: #12301f;
  --success-text: #4ade80;
  --danger-bg: #351417;
  --danger-text: #ff7a8a;

  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);

  --header-bg: rgba(23, 17, 20, 0.82);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
  transition: background 0.35s ease, color 0.35s ease;
  animation: pageFade 0.5s ease both;
}

@keyframes pageFade{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp{
  from{ opacity: 0; transform: translateY(18px); }
  to{ opacity: 1; transform: translateY(0); }
}

@keyframes popIn{
  0%{ opacity: 0; transform: scale(0.85); }
  70%{ opacity: 1; transform: scale(1.03); }
  100%{ opacity: 1; transform: scale(1); }
}

@keyframes floatSoft{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

@keyframes shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

@keyframes bounceBadge{
  0%{ transform: scale(0.4); }
  60%{ transform: scale(1.25); }
  100%{ transform: scale(1); }
}

@keyframes spinSlow{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* ==== THEME TOGGLE SWITCH ==== */
.theme-toggle{
  position: relative;
  width: 56px;
  height: 30px;
  border-radius: 30px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 3px;
  transition: background 0.3s ease, border-color 0.3s ease;
  flex-shrink: 0;
}

.theme-toggle .track-icon{
  font-size: 13px;
  width: 50%;
  text-align: center;
  line-height: 1;
  opacity: 0.6;
}

.theme-toggle .knob{
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gradient);
  box-shadow: 0 2px 6px rgba(155, 24, 60, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: transform 0.35s cubic-bezier(.4,1.6,.4,1);
}

[data-theme="dark"] .theme-toggle .knob{
  transform: translateX(26px);
}

.theme-toggle:hover{
  box-shadow: 0 0 0 4px var(--primary-soft);
}

/* Utility: staggered reveal for grids */
.reveal{
  opacity: 0;
  animation: fadeUp 0.55s ease forwards;
}
.reveal:nth-child(1){ animation-delay: .05s; }
.reveal:nth-child(2){ animation-delay: .12s; }
.reveal:nth-child(3){ animation-delay: .19s; }
.reveal:nth-child(4){ animation-delay: .26s; }
.reveal:nth-child(5){ animation-delay: .33s; }
.reveal:nth-child(6){ animation-delay: .4s; }
.reveal:nth-child(7){ animation-delay: .47s; }
.reveal:nth-child(8){ animation-delay: .54s; }

::selection{
  background: var(--primary);
  color: #fff;
}

/* Scrollbar accent (webkit) */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--primary-light); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover{ background: var(--primary); }