/* ═══════════════════════════════════════════════════════════
   ALPHA HOSPITAL — CSS DESIGN TOKENS
   Silent Futurism Design Language (2040-era)
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ─── Color Palette ─── */
  --bg-void:        #fff0f5;
  --bg-surface:     #ffe4e1;
  --bg-surface-2:   #ffd1dc;
  --bg-glass:       rgba(255, 255, 255, 0.5);
  --bg-glass-hover: rgba(255, 255, 255, 0.7);
  --bg-glass-strong:rgba(255, 255, 255, 0.9);

  --accent-teal:    #ff1493;
  --accent-teal-rgb:255, 20, 147;
  --accent-glow:    rgba(255, 20, 147, 0.12);
  --accent-teal-dim:#ff149330;
  --accent-teal-soft:#ff149315;

  --text-primary:   #1a0f14;
  --text-secondary: #331e28;
  --text-muted:     #663c50;
  --text-white:     #1a0f14;

  --border-soft:    rgba(255, 20, 147, 0.15);
  --border-hover:   rgba(255, 20, 147, 0.3);
  --border-focus:   rgba(255, 20, 147, 0.5);

  --red-pulse:      #ff4757;
  --red-pulse-rgb:  255, 71, 87;
  --red-glow:       rgba(255, 71, 87, 0.2);

  --success:        #2ed573;
  --warning:        #ffa502;
  --info:           #3742fa;

  /* ─── Gradients ─── */
  --gradient-teal:    linear-gradient(135deg, #ff69b4, #ff1493);
  --gradient-surface: linear-gradient(180deg, #ffe4e1 0%, #fff0f5 100%);
  --gradient-glass:   linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.3) 100%);
  --gradient-hero:    linear-gradient(180deg, rgba(255,240,245,0.4) 0%, rgba(255,240,245,0.85) 60%, #fff0f5 100%);
  --gradient-aurora-1:#ff149310;
  --gradient-aurora-2:#3742fa08;
  --gradient-aurora-3:#ff475706;

  /* ─── Typography ─── */
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-md:   1.125rem;   /* 18px */
  --fs-lg:   1.25rem;    /* 20px */
  --fs-xl:   1.5rem;     /* 24px */
  --fs-2xl:  2rem;       /* 32px */
  --fs-3xl:  2.5rem;     /* 40px */
  --fs-4xl:  3rem;       /* 48px */
  --fs-5xl:  3.75rem;    /* 60px */
  --fs-6xl:  4.5rem;     /* 72px */
  --fs-hero: clamp(2.5rem, 6vw, 5rem);

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relaxed:1.7;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  --ls-tight:   -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.05em;
  --ls-wider:    0.1em;

  /* ─── Spacing Scale ─── */
  --sp-1:  0.25rem;   /* 4px */
  --sp-2:  0.5rem;    /* 8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  --sp-20: 5rem;      /* 80px */
  --sp-24: 6rem;      /* 96px */
  --sp-32: 8rem;      /* 128px */

  /* ─── Layout ─── */
  --container-max: 1280px;
  --container-wide: 1440px;
  --container-narrow: 860px;
  --container-px: clamp(1.25rem, 4vw, 3rem);

  --section-py: clamp(4rem, 10vw, 8rem);
  --section-py-lg: clamp(6rem, 12vw, 10rem);

  /* ─── Border Radius ─── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* ─── Shadows & Glow ─── */
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.05);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl:    0 16px 48px rgba(0,0,0,0.15);
  --shadow-glow:  0 0 30px rgba(255, 20, 147, 0.15);
  --shadow-glow-lg: 0 0 60px rgba(255, 20, 147, 0.2);
  --shadow-red:   0 0 30px rgba(255, 71, 87, 0.2);
  --shadow-inner: inset 0 1px 0 rgba(255,255,255,0.5);

  /* ─── Glass Effect ─── */
  --glass-blur:   blur(20px);
  --glass-blur-sm:blur(12px);
  --glass-blur-lg:blur(40px);
  --glass-bg:     rgba(255, 255, 255, 0.7);
  --glass-border: 1px solid var(--border-soft);

  /* ─── Z-Index Layers ─── */
  --z-behind:    -1;
  --z-base:       0;
  --z-raised:    10;
  --z-nav:       100;
  --z-sticky:    200;
  --z-overlay:   500;
  --z-modal:     600;
  --z-fab:       700;
  --z-lightbox:  800;
  --z-loader:    900;
  --z-cursor:    9999;

  /* ─── Transitions ─── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
  --duration-slower: 700ms;

  /* ─── Adjustable Animations ─── */
  --anim-float-dur: 4s;
  --anim-glow-dur: 3s;
  --anim-shimmer-dur: 2s;
  --anim-rotate-dur: 12s;
  --anim-gradient-dur: 4s;

  /* ─── Navbar ─── */
  --nav-height: 120px;
  --nav-height-shrink: 80px;

  /* ─── Sidebar (Admin) ─── */
  --sidebar-width: 260px;
}

/* ─── Responsive Overrides ─── */
@media (max-width: 1024px) {
  :root {
    --section-py: clamp(3rem, 8vw, 5rem);
    --nav-height: 72px;
  }
}

@media (max-width: 768px) {
  :root {
    --section-py: clamp(2.5rem, 6vw, 4rem);
    --nav-height: 64px;
    --container-px: 1.25rem;
  }
}

@media (max-width: 480px) {
  :root {
    --section-py: 2.5rem;
    --nav-height: 60px;
  }
}