/* =========================================================================
   RTH — Design Tokens
   Tək həqiqət mənbəyi. Rənglər, tipoqrafiya, məsafələr, kölgələr, keçidlər.
   Brend rəngləri loqodan götürülüb: qırmızı #D14124, mavi #2277D5.
   ========================================================================= */

:root {
  /* ---- Brend ---------------------------------------------------------- */
  --brand-red: #d14124;
  --brand-red-400: #e85c3c;
  --brand-red-300: #f4805f;
  --brand-blue: #2378d8;   /* rəsmi loqo faylından */
  --brand-blue-400: #4a9bef;
  --brand-blue-300: #7ab8f7;

  /* ---- Səth / fon ------------------------------------------------------ */
  --bg: #05080f;
  --bg-elevated: #080d18;
  --bg-panel: #0b1220;
  --surface: rgba(255, 255, 255, 0.026);
  --surface-hover: rgba(255, 255, 255, 0.05);
  --surface-strong: rgba(255, 255, 255, 0.07);

  /* ---- Sərhədlər ------------------------------------------------------- */
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-brand: rgba(34, 119, 213, 0.42);

  /* ---- Mətn ------------------------------------------------------------ */
  --text: #eef2fa;
  --text-secondary: #b3bed3;
  --text-muted: #7e8ba5;
  --text-faint: #6f7c95;

  /* ---- Semantik -------------------------------------------------------- */
  --success: #35c98a;
  --warning: #e8b33c;
  --danger: #f0563a;
  --focus-ring: #4a9bef;

  /* ---- Qradiyentlər ---------------------------------------------------- */
  --grad-brand: linear-gradient(112deg, var(--brand-blue) 0%, var(--brand-red) 100%);
  --grad-brand-soft: linear-gradient(
    112deg,
    rgba(34, 119, 213, 0.16) 0%,
    rgba(209, 65, 36, 0.16) 100%
  );
  --grad-text: linear-gradient(
    100deg,
    #ffffff 0%,
    #cfe0f7 32%,
    var(--brand-blue-300) 58%,
    var(--brand-red-300) 100%
  );
  --grad-line: linear-gradient(
    90deg,
    transparent,
    var(--brand-blue) 22%,
    var(--brand-red) 78%,
    transparent
  );

  /* ---- Tipoqrafiya ----------------------------------------------------- */
  --font-display: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", ui-monospace, monospace;

  /* Fluid tipoqrafiya — 360px → 1600px arası rəvan böyüyür */
  --fs-xs: clamp(0.72rem, 0.69rem + 0.14vw, 0.8rem);
  --fs-sm: clamp(0.82rem, 0.78rem + 0.18vw, 0.92rem);
  --fs-base: clamp(0.95rem, 0.9rem + 0.22vw, 1.06rem);
  --fs-md: clamp(1.06rem, 0.99rem + 0.32vw, 1.22rem);
  --fs-lg: clamp(1.22rem, 1.1rem + 0.55vw, 1.55rem);
  --fs-xl: clamp(1.5rem, 1.28rem + 1vw, 2.15rem);
  --fs-2xl: clamp(1.9rem, 1.5rem + 1.8vw, 3rem);
  --fs-3xl: clamp(2.3rem, 1.65rem + 2.9vw, 4.1rem);
  --fs-4xl: clamp(2.7rem, 1.6rem + 4.8vw, 5.6rem);

  --lh-tight: 1.06;
  --lh-snug: 1.24;
  --lh-normal: 1.62;
  --lh-loose: 1.78;

  --tracking-tight: -0.028em;
  --tracking-normal: -0.012em;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.16em;

  /* ---- Məsafə (density 4/10 — standart, marketinq üçün havalı) --------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);

  /* ---- Radius ---------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-full: 999px;

  /* ---- Kölgə ----------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 32px 68px -28px rgba(0, 0, 0, 0.85);
  --shadow-glow-blue: 0 0 0 1px rgba(34, 119, 213, 0.35), 0 18px 50px -18px rgba(34, 119, 213, 0.55);
  --shadow-glow-red: 0 0 0 1px rgba(209, 65, 36, 0.35), 0 18px 50px -18px rgba(209, 65, 36, 0.5);

  /* ---- Hərəkət --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 620ms;
  --dur-cinematic: 1100ms;

  /* ---- Layout ---------------------------------------------------------- */
  --container: 1240px;
  --container-wide: 1440px;
  --container-narrow: 780px;
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 3rem);
  /* Loqo şüarı ilə birlikdə göstərildiyi üçün başlıq hündürdür —
     ekran genişliyinə görə 84px ↔ 104px arasında dəyişir. */
  --header-h: clamp(84px, 6.6vw, 104px);

  /* ---- Z qatları ------------------------------------------------------- */
  --z-bg: 0;
  --z-content: 1;
  --z-sticky: 40;
  --z-header: 50;
  --z-drawer: 45; /* başlıqdan AŞAĞIDA: mobil menyu açıqkən də tema/dil düymələri işləsin */
  --z-cursor: 90;
  --z-overlay: 100;

  /* ---- Temaya bağlı köməkçi dəyərlər --------------------------------- */
  /* Bunlar komponentlərdə birbaşa rgba yazmamaq üçündür — açıq temada
     hamısı aşağıdakı `[data-theme="light"]` blokunda əvəz olunur. */
  --scrim-header: rgba(5, 8, 15, 0.72);      /* sürüşdürülmüş başlıq fonu */
  --scrim-panel: rgba(11, 18, 32, 0.96);     /* açılan menyular */
  --scrim-drawer: rgba(5, 8, 15, 0.97);      /* mobil menyu */
  --scrim-float: rgba(11, 18, 32, 0.9);      /* üzən çiplər, "yuxarı qalx" */
  --orbit-core-bg: rgba(5, 8, 15, 0.9);      /* hero-dakı dairənin mərkəzi */

  --grid-line: rgba(255, 255, 255, 0.022);   /* fondakı şəbəkə */
  --grid-line-strong: rgba(255, 255, 255, 0.03);
  --noise-opacity: 0.032;                    /* qranula toxuması */
  --aura-opacity: 0.5;                       /* işıq ləkələri */
  --canvas-opacity: 0.62;                    /* hero şəbəkə animasiyası */
  --ghost-opacity: 0.05;                     /* fondakı nəhəng loqo */

  --ink-ghost: rgba(255, 255, 255, 0.035);   /* kartdakı böyük rəqəm */
  --ink-ghost-brand: rgba(74, 155, 239, 0.09);
  --sheen-color: rgba(255, 255, 255, 0.07);  /* kartın üzərindən keçən işıq */
  --row-hover: rgba(255, 255, 255, 0.022);   /* cədvəl sətri */
  --input-bg: rgba(255, 255, 255, 0.028);
  --input-bg-focus: rgba(34, 119, 213, 0.05);
  --select-bg: rgba(34, 119, 213, 0.42);
  --map-filter: grayscale(1) invert(0.92) contrast(0.86) hue-rotate(185deg);
  --cursor-ring: rgba(122, 184, 247, 0.7);
  --cursor-ring-active: rgba(74, 155, 239, 0.9);
  --cursor-fill-active: rgba(34, 119, 213, 0.12);
  --shot-shadow: 0 20px 38px rgba(0, 0, 0, 0.55);  /* məhsul/cihaz fotosu */
}

/* =========================================================================
   AÇIQ TEMA
   `<html data-theme="light">` olduqda qüvvəyə minir. Tema seçimi
   assets/js/theme.js tərəfindən idarə olunur; ilk ziyarətdə isə
   əməliyyat sisteminin seçiminə uyğun gəlir.
   ========================================================================= */
:root[data-theme="light"] {
  /* Brend rəngləri açıq fonda oxunaqlı olsun deyə tündləşdirilib.
     `--brand-red` və `--brand-blue` isə loqo rəngləri olaraq qalır —
     onlar qradiyent və doldurma üçün işlədilir. */
  --brand-red-400: #b8371c;
  --brand-red-300: #c9411f;
  --brand-blue-400: #1462b8;
  --brand-blue-300: #1a6fc9;

  --bg: #f6f8fc;
  --bg-elevated: #ffffff;
  --bg-panel: #eef3f9;
  --surface: #ffffff;
  --surface-hover: #fbfcfe;
  --surface-strong: rgba(12, 24, 38, 0.06);

  --border: rgba(12, 24, 38, 0.11);
  --border-strong: rgba(12, 24, 38, 0.2);
  --border-brand: rgba(34, 119, 213, 0.45);

  --text: #0c1826;
  --text-secondary: #3a4a5f;
  --text-muted: #56677e;
  --text-faint: #61708a;

  --success: #12855b;
  --warning: #a2740d;
  --danger: #c8371c;
  --focus-ring: #1462b8;

  --grad-brand-soft: linear-gradient(
    112deg,
    rgba(34, 119, 213, 0.1) 0%,
    rgba(209, 65, 36, 0.1) 100%
  );
  --grad-text: linear-gradient(
    100deg,
    #0c1826 0%,
    #16354f 30%,
    var(--brand-blue-300) 62%,
    var(--brand-red-300) 100%
  );

  --shadow-sm: 0 1px 2px rgba(16, 32, 56, 0.07);
  --shadow-md: 0 12px 30px -14px rgba(16, 32, 56, 0.22);
  --shadow-lg: 0 30px 60px -30px rgba(16, 32, 56, 0.3);
  --shadow-glow-blue: 0 0 0 1px rgba(34, 119, 213, 0.3), 0 16px 40px -18px rgba(34, 119, 213, 0.5);
  --shadow-glow-red: 0 0 0 1px rgba(209, 65, 36, 0.3), 0 16px 40px -18px rgba(209, 65, 36, 0.45);

  --scrim-header: rgba(255, 255, 255, 0.8);
  --scrim-panel: rgba(255, 255, 255, 0.97);
  --scrim-drawer: rgba(249, 251, 253, 0.98);
  --scrim-float: rgba(255, 255, 255, 0.93);
  --orbit-core-bg: rgba(255, 255, 255, 0.92);

  --grid-line: rgba(12, 24, 38, 0.05);
  --grid-line-strong: rgba(12, 24, 38, 0.06);
  --noise-opacity: 0.018;
  --aura-opacity: 0.2;
  --canvas-opacity: 0.5;
  --ghost-opacity: 0.04;

  --ink-ghost: rgba(12, 24, 38, 0.05);
  --ink-ghost-brand: rgba(34, 119, 213, 0.12);
  --sheen-color: rgba(12, 24, 38, 0.045);
  --row-hover: rgba(12, 24, 38, 0.028);
  --input-bg: #ffffff;
  --input-bg-focus: rgba(34, 119, 213, 0.04);
  --select-bg: rgba(34, 119, 213, 0.24);
  --map-filter: saturate(0.9) contrast(1.02);
  --cursor-ring: rgba(20, 98, 184, 0.55);
  --cursor-ring-active: rgba(20, 98, 184, 0.85);
  --cursor-fill-active: rgba(34, 119, 213, 0.1);
  --shot-shadow: 0 18px 32px rgba(16, 32, 56, 0.22);
}

/* İstifadəçi hərəkəti azaltmağı seçibsə — bütün kinematik keçidlər söndürülür */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-cinematic: 1ms;
  }
}