/* ============================================================
   TBL MedRCM — Design System Variables
   Brand: TBL MedRCM | Primary Blue #0A6EB4 | Deep Navy #08334F | Accent Green #6DB33F
   Typography: 'Montserrat' for Headings | 'Inter' for Body
   ============================================================ */

:root {
  /* ── Colors ────────────────────────────────────────────── */
  --color-white:        #FFFFFF;
  --color-tint:         #F4F8FB;   /* Soft background tint */
  --color-navy:         #08334F;   /* Deep Navy for headings, footer */
  --color-navy-mid:     #0b4266;   /* Mid navy */
  --color-navy-dark:    #052336;   /* Darkest navy */
  --color-blue:         #0A6EB4;   /* Primary dominant blue */
  --color-blue-hover:   #085a94;
  --color-teal:         #6DB33F;   /* Accent green (matches brand) */
  --color-teal-dark:    #559A2C;   /* Dark green hover */
  --color-ink:          #3D3D3D;   /* Dark grey body text */
  --color-ink-light:    #6B7280;   /* Muted secondary text */
  --color-border:       #E3EAF0;   /* Soft borders */
  --color-overlay:      rgba(8, 51, 79, 0.72);
  --color-overlay-lg:   rgba(8, 51, 79, 0.85);

  /* ── Gradients ──────────────────────────────────────────── */
  --gradient-brand:     linear-gradient(135deg, #0A6EB4 0%, #6DB33F 100%);
  --gradient-brand-h:   linear-gradient(90deg, #0A6EB4 0%, #6DB33F 100%);

  /* ── Typography ────────────────────────────────────────── */
  --font-display:       'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Type scale */
  --text-display:       clamp(2.25rem, 4.5vw, 3.75rem);
  --text-h1:            clamp(2rem, 3.5vw, 3.25rem);
  --text-h2:            clamp(1.75rem, 2.8vw, 2.35rem);
  --text-h3:            1.5rem;
  --text-h4:            1.125rem;
  --text-body:          1.0625rem;
  --text-sm:            0.9375rem;
  --text-xs:            0.8125rem;
  --text-eyebrow:       0.8125rem;

  /* Line heights */
  --lh-display:         1.1;
  --lh-heading:         1.18;
  --lh-body:            1.65;

  /* Letter spacing */
  --ls-display:         -0.02em;
  --ls-heading:         -0.02em;
  --ls-eyebrow:         0.12em;

  /* Font weights */
  --fw-regular:         400;
  --fw-medium:          500;
  --fw-semibold:        600;
  --fw-bold:            700;

  /* ── Spacing (8px system) ───────────────────────────────── */
  --sp-1:   0.5rem;    /*  8px */
  --sp-2:   1rem;      /* 16px */
  --sp-3:   1.5rem;    /* 24px */
  --sp-4:   2rem;      /* 32px */
  --sp-5:   2.5rem;    /* 40px */
  --sp-6:   3rem;      /* 48px */
  --sp-7:   3.5rem;    /* 56px */
  --sp-8:   4rem;      /* 64px */
  --sp-9:   4.5rem;    /* 72px */
  --sp-10:  5rem;      /* 80px */
  --sp-12:  6rem;      /* 96px */
  --sp-15:  7.5rem;    /* 120px */

  --section-sm:    4.5rem 0;
  --section-md:    6rem 0;
  --section-lg:    7.5rem 0;

  /* ── Radius (12-16px per brand guideline) ────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 9999px;

  /* ── Borders ──────────────────────────────────────────────── */
  --border-hair: 1px solid var(--color-border);
  --border-navy: 1px solid var(--color-navy);

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-xs: 0 1px 3px rgba(8, 51, 79, 0.05);
  --shadow-sm: 0 2px 8px rgba(8, 51, 79, 0.07);
  --shadow-md: 0 8px 24px rgba(8, 51, 79, 0.09);
  --shadow-lg: 0 16px 40px rgba(8, 51, 79, 0.12);

  /* ── Transitions ──────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  180ms;
  --dur-base:  280ms;
  --dur-slow:  450ms;

  /* ── Z-index layers ───────────────────────────────────────── */
  --z-below:     -1;
  --z-base:       0;
  --z-above:      1;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-offcanvas: 300;
  --z-modal:     400;
  --z-toast:     500;

  /* ── Heights ─────────────────────────────────────────────── */
  --topbar-h:       36px;
  --navbar-h:       76px;
  --navbar-h-sm:    64px;

  /* ── Container ───────────────────────────────────────────── */
  --container-max:  1280px;
  --container-pad:  clamp(1rem, 4vw, 2rem);

  /* ── Inner hero ──────────────────────────────────────────── */
  --hero-inner-min:  42vh;
  --hero-inner-max:  50vh;

  /* ── Animation ───────────────────────────────────────────── */
  --reveal-translate: 24px;
  --reveal-dur:       600ms;
  --reveal-ease:      cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:  0ms;
    --dur-base:  0ms;
    --dur-slow:  0ms;
    --reveal-dur: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}