/* ═══════════════════════════════════════════════════════
   STATUS MEDICAL CENTER — DESIGN TOKENS
   Single source of truth for all CSS custom properties
═══════════════════════════════════════════════════════ */

:root {
  /* ── Palette ── */
  --gold:             #D4AF37;
  --gold-light:       #F0D060;
  --gold-dark:        #A8891A;
  --gold-glow:        rgba(212, 175, 55, 0.35);
  --teal:             #0F766E;
  --teal-light:       #14B8A6;
  --dark:             #1C1917;
  --dark-2:           #292524;
  --white:            #FFFFFF;
  --gray-light:       #F8F6F1;
  --border:           #E8E2D9;

  /* ── Text (WCAG AA) ── */
  --gray-warm:        #57534E;  /* 4.5:1 contrast on white */
  --text-muted:       #374151;  /* 7:1 contrast on white  */
  --text-secondary:   #44403C;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(28,25,23,0.08), 0 1px 2px rgba(28,25,23,0.06);
  --shadow-md:  0 4px 16px rgba(28,25,23,0.10), 0 2px 6px rgba(28,25,23,0.06);
  --shadow-lg:  0 12px 40px rgba(28,25,23,0.12), 0 4px 14px rgba(28,25,23,0.08);
  --shadow-xl:  0 24px 60px rgba(28,25,23,0.16);

  /* ── Radii ── */
  --radius:    16px;
  --radius-sm: 10px;
  --radius-lg: 24px;

  /* ── Floating Header ── */
  --fh-gold:        var(--gold);
  --fh-gold-dark:   var(--gold-dark);
  --fh-gold-glow:   var(--gold-glow);
  --fh-dark:        var(--dark);
  --fh-teal:        var(--teal);
  --fh-text:        #292524;
  --fh-muted:       #78716C;
  --fh-border:      rgba(212, 175, 55, 0.18);
  --fh-glass-bg:    rgba(255, 255, 255, 0.82);
  --fh-glass-bg2:   rgba(255, 255, 255, 0.96);
  --fh-blur:        blur(24px) saturate(1.8);
  --fh-radius:      20px;
  --fh-h:           68px;
  --fh-h-sm:        54px;
  --fh-transition:  all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}