/* ==========================================================================
   Marsol Academy — Design Tokens
   Bütün səhifələr və admin panel yalnız bu dəyişənlərdən istifadə edir.
   Ətraflı izah: DESIGN-SYSTEM.md
   ========================================================================== */

:root {
  /* ---- Rənglər ---- */
  --c-primary:     #192951;  /* Əsas: tünd göy (loqo) — mətn, primary CTA, tünd bölmələr */
  --c-secondary:   #22366A;  /* İkinci dərəcəli tünd səth */
  --c-accent:      #93BF1E;  /* Aksent: yaşıl (loqo) — CTA, vurğu, fokus, aktiv hal */
  --c-accent-soft: #E6F2C7;  /* Aksentin yumşaq fonu (badge, seçim) */
  --c-accent-ink:  #192951;  /* Yaşıl fon üzərində mətn */
  --c-bg:          #F5F6F2;  /* Səhifə fonu — isti ağ */
  --c-surface:     #FFFFFF;  /* Kart, forma səthi */
  --c-text:        #192951;  /* Əsas mətn */
  --c-text-2:      #5A6378;  /* İkinci dərəcəli mətn */
  --c-text-inv:    #F5F6F2;  /* Tünd fon üzərində mətn */
  --c-text-inv-2:  #A9B3C9;
  --c-border:      #E1E4DC;  /* Nazik xətlər */
  --c-border-inv:  #2E4175;
  --c-muted:       #EBEEE6;  /* Neytral blok fonu */
  --c-accent-hover: #A5D12F;
  --c-primary-rgb: 25, 41, 81;
  --c-accent-rgb:  147, 191, 30;
  --c-bg-rgb:      245, 246, 242;
  --c-header-bg:   rgba(var(--c-bg-rgb), .92);
  --c-article:     #33405E;
  --c-dot:         #CDD2DC;
  --c-dot-hover:   #AEB5C4;
  --c-success:     #1F8A4C;
  --c-danger:      #C8322B;

  /* ---- Tipoqrafiya ---- */
  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero: clamp(3rem, 1.4rem + 5.6vw, 7rem);
  --fs-h1:   clamp(2.6rem, 1.4rem + 5vw, 5.5rem);
  --fs-h2:   clamp(2.1rem, 1.3rem + 3.2vw, 4rem);
  --fs-h3:   clamp(1.4rem, 1.1rem + 1.1vw, 2rem);
  --fs-h4:   clamp(1.15rem, 1.05rem + .4vw, 1.375rem);
  --fs-lead: clamp(1.125rem, 1rem + .45vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-sm:   .9375rem;
  --fs-xs:   .8125rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --lh-tight: .98;
  --lh-heading: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  --ls-tight: -.045em;
  --ls-heading: -.03em;
  --ls-label: .08em;

  /* ---- Boşluq şkalası (4px əsaslı) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  --section-y: clamp(80px, 5vw + 56px, 160px);
  --container: 1360px;
  --container-narrow: 920px;
  --gutter: clamp(20px, 4vw, 56px);

  /* ---- Radius ---- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 44px;
  --r-pill: 999px;

  /* ---- Kölgələr (qənaətlə) ---- */
  --shadow-sm: 0 1px 2px rgba(25, 41, 81, .06);
  --shadow-md: 0 12px 32px -12px rgba(25, 41, 81, .18);
  --shadow-lg: 0 30px 60px -20px rgba(25, 41, 81, .25);

  /* ---- Animasiya ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 800ms;

  --header-h: 84px;
  --z-header: 50;
  --z-menu: 60;

  /* ---- Breakpoint-lər (media query-lərdə istifadə üçün istinad) ----
     xl: 1200px · lg: 1024px · md: 820px · sm: 600px · xs: 400px  */
}

/* ==========================================================================
   Gecə rejimi — html[data-theme="dark"]
   Brend rəngləri (əsas/aksent) admin paneldən gəlir, qalanı buradadır.
   ========================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;
  --c-bg:          #0B1322;
  --c-bg-rgb:      11, 19, 34;
  --c-surface:     #121C31;
  --c-text:        #EDF0F6;
  --c-text-2:      #9DA8BF;
  --c-text-inv:    #F5F6F2;
  --c-text-inv-2:  #A9B3C9;
  --c-border:      #22304C;
  --c-muted:       #18233B;
  --c-article:     #C9D1E0;
  --c-dot:         #2A3857;
  --c-dot-hover:   #3A4B70;
  --c-header-bg:   rgba(11, 19, 34, .86);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 14px 34px -12px rgba(0, 0, 0, .65);
  --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, .75);
}
html:not([data-theme="dark"]) { color-scheme: light; }