/* =================================================================
 * variables.css — DESIGN CONTROL PANEL (modern 2026 refresh)
 * Change values here to instantly rebrand the entire website.
 * ============================================================== */

:root {

  /* ---- BRAND COLOURS (modern medical teal/mint) ---- */
  --color-primary:        #0fb5a6;   /* main brand teal */
  --color-primary-600:    #0a9a8d;
  --color-primary-700:    #0a7d74;
  --color-primary-soft:   #e6f7f5;   /* tint background */
  --color-secondary:      #0b2a3a;   /* deep ink navy */
  --color-accent:         #18cf9f;   /* vivid mint */
  --color-accent-2:       #3aa0ff;   /* supporting blue */

  /* gradients */
  --grad-primary: linear-gradient(135deg, #0fb5a6 0%, #18cf9f 100%);
  --grad-cta:     linear-gradient(135deg, #0b7d74 0%, #0b2a3a 100%);
  --grad-soft:    linear-gradient(180deg, #effbf9 0%, #ffffff 100%);
  --grad-mesh:    radial-gradient(60% 60% at 80% 0%, rgba(24,207,159,.18), transparent 60%),
                  radial-gradient(50% 50% at 0% 30%, rgba(58,160,255,.12), transparent 60%);

  /* ---- NEUTRALS ---- */
  --color-bg:        #ffffff;
  --color-bg-alt:    #f5faf9;
  --color-surface:   #ffffff;
  --color-border:    #e7eeec;
  --color-text:      #314150;
  --color-text-soft: #647585;
  --color-ink:       #0b2a3a;
  --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: "Plus Jakarta Sans", "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: 72px;

  /* ---- RADIUS ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---- SHADOWS (soft, layered) ---- */
  --shadow-xs: 0 1px 2px rgba(11, 42, 58, 0.06);
  --shadow-sm: 0 4px 14px rgba(11, 42, 58, 0.07);
  --shadow-md: 0 12px 30px rgba(11, 42, 58, 0.10);
  --shadow-lg: 0 28px 60px rgba(11, 42, 58, 0.16);
  --shadow-primary: 0 14px 34px rgba(15, 181, 166, 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; }
}