/* =================================================================
 * variables.css — DESIGN CONTROL PANEL
 * "Doctr X" blue theme for Dr. Xatirə Aslanova (infeksionxestelikler.az).
 * Distinct from the Parasitus clinic site (teal). Royal blue + deep navy.
 * ============================================================== */

:root {

  /* ---- BRAND COLOURS (royal blue + deep navy) ---- */
  --color-primary:        #2f5cff;   /* main royal blue */
  --color-primary-600:    #1f48ec;
  --color-primary-700:    #173bc4;
  --color-primary-soft:   #e9efff;   /* light blue tint background */
  --color-secondary:      #0a1733;   /* deep navy (header/footer/dark sections) */
  --color-accent:         #5b8def;   /* mid blue */
  --color-accent-2:       #8ec2ff;   /* sky blue */

  /* gradients */
  --grad-primary: linear-gradient(135deg, #2f5cff 0%, #5b8def 100%);
  --grad-cta:     linear-gradient(135deg, #3360ff 0%, #1430a6 100%);
  --grad-navy:    linear-gradient(150deg, #0c1d44 0%, #0a1733 60%, #0a1430 100%);
  --grad-soft:    linear-gradient(180deg, #eef3ff 0%, #ffffff 100%);
  --grad-mesh:    radial-gradient(60% 60% at 82% 0%, rgba(47,92,255,.30), transparent 60%),
                  radial-gradient(55% 55% at 0% 25%, rgba(142,194,255,.22), transparent 60%);

  /* ---- NEUTRALS ---- */
  --color-bg:        #ffffff;
  --color-bg-alt:    #f3f6ff;
  --color-surface:   #ffffff;
  --color-border:    #e6ebf7;
  --color-text:      #44506b;
  --color-text-soft: #6f7a96;
  --color-ink:       #0a1733;
  --color-text-inv:  #ffffff;

  /* ---- STATUS ---- */
  --color-success: #16a36b;
  --color-warning: #e0a106;
  --color-danger:  #e0494b;

  /* ---- TYPOGRAPHY ---- */
  --font-base: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-head: "Manrope", "Inter", system-ui, -apple-system, Arial, sans-serif;

  --fs-xs:   0.8125rem;   /* 13 */
  --fs-sm:   0.9375rem;   /* 15 */
  --fs-base: 1.0625rem;   /* 17 */
  --fs-lg:   1.1875rem;   /* 19 */
  --fs-xl:   1.5rem;      /* 24 */
  --fs-2xl:  2rem;        /* 32 */
  --fs-3xl:  2.75rem;     /* 44 */
  --fs-4xl:  3.5rem;      /* 56 */

  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh-base:  1.7;

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* ---- SPACING SCALE ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 1.75rem;
  --space-7: 2.5rem;
  --space-8: 3.25rem;
  --space-9: 4.25rem;

  /* ---- LAYOUT ---- */
  --container-max: 1200px;
  --container-wide: 1320px;
  --container-pad: 1.25rem;
  --header-height: 80px;

  /* ---- RADIUS (rounded, Doctr X feel) ---- */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --radius-pill: 999px;

  /* ---- SHADOWS (soft, navy-tinted) ---- */
  --shadow-xs: 0 1px 2px rgba(10, 23, 51, 0.06);
  --shadow-sm: 0 6px 18px rgba(10, 23, 51, 0.08);
  --shadow-md: 0 16px 36px rgba(10, 23, 51, 0.10);
  --shadow-lg: 0 30px 64px rgba(10, 23, 51, 0.18);
  --shadow-primary: 0 16px 36px rgba(47, 92, 255, 0.32);

  /* ---- MOTION ---- */
  --transition: 0.22s cubic-bezier(.4, 0, .2, 1);
  --transition-slow: 0.5s cubic-bezier(.4, 0, .2, 1);

  /* ---- Z-INDEX ---- */
  --z-header: 1000;
  --z-overlay: 1100;
  --z-modal: 1200;
}

@media (prefers-reduced-motion: reduce) {
  :root { --transition: 0s; --transition-slow: 0s; }
  * { scroll-behavior: auto !important; }
}