/* ============================================
   Design Tokens — Resindo Medika
   ============================================ */

:root {
  /* Colors — Primary */
  --navy-950: #060E1A;
  --navy-900: #0A1628;
  --navy-800: #0F2140;
  --navy-700: #1A3158;
  --navy-600: #1E4D8C;
  --navy-500: #2B6CB0;

  /* Colors — Accent */
  --teal-700: #0A7D6B;
  --teal-600: #0D9B85;
  --teal-500: #10B69B;
  --teal-400: #34D1B8;
  --teal-300: #5EDDC8;
  --accent-cyan: #06B6D4;

  /* Colors — Neutral */
  --white: #FFFFFF;
  --off-white: #F9FAFB;
  --cream: #FAFBFD;
  --blue-gray-50: #F0F4F8;
  --blue-gray-100: #D9E2EC;
  --blue-gray-200: #BCCCDC;
  --light-blue: #F0F5FD;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* Colors — Semantic */
  --wa-green: #1B7A3D;
  --wa-green-hover: #156331;
  --danger: #EF4444;

  /* Typography */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  --fs-display: clamp(2.5rem, 5.5vw, 3.75rem);
  --fs-h1: clamp(2.25rem, 4.5vw, 3.25rem);
  --fs-h2: clamp(1.875rem, 3.5vw, 2.625rem);
  --fs-h3: clamp(1.375rem, 2.2vw, 1.625rem);
  --fs-h4: 1.1875rem;
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;
  --space-section: clamp(5rem, 8vw, 8rem);

  /* Layout */
  --container-max: 1280px;
  --container-narrow: 900px;
  --container-padding: 1.5rem;

  /* Borders & Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(15, 33, 64, 0.05);
  --shadow-md: 0 4px 12px rgba(15, 33, 64, 0.06);
  --shadow-lg: 0 8px 30px rgba(15, 33, 64, 0.1);
  --shadow-xl: 0 16px 48px rgba(15, 33, 64, 0.14);
  --shadow-card: 0 1px 4px rgba(15, 33, 64, 0.04), 0 6px 20px rgba(15, 33, 64, 0.06);
  --shadow-card-hover: 0 4px 12px rgba(15, 33, 64, 0.08), 0 16px 40px rgba(15, 33, 64, 0.12);
  --shadow-nav: 0 1px 8px rgba(15, 33, 64, 0.06);
  --shadow-glow-teal: 0 0 0 1px rgba(13,155,133,0.2), 0 4px 16px rgba(13,155,133,0.15), 0 0 32px rgba(13,155,133,0.08);
  --shadow-glow-teal-strong: 0 0 0 1px rgba(13,155,133,0.3), 0 4px 20px rgba(13,155,133,0.25), 0 0 48px rgba(13,155,133,0.15);
  --shadow-inner-glow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 0 20px rgba(13,155,133,0.05);
  --shadow-glow-subtle: 0 0 40px rgba(13,155,133,0.1);

  /* Gradients */
  --gradient-hero: linear-gradient(135deg, var(--cream) 0%, var(--blue-gray-50) 50%, #EEF2F7 100%);
  --gradient-mesh: radial-gradient(ellipse 80% 60% at 70% 40%, rgba(13, 155, 133, 0.12) 0%, transparent 60%),
                    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(30, 77, 140, 0.10) 0%, transparent 60%),
                    radial-gradient(ellipse 50% 40% at 90% 20%, rgba(13, 155, 133, 0.06) 0%, transparent 50%);
  --gradient-hero-dark: linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 30%, var(--navy-800) 60%, #0C2844 80%, var(--navy-900) 100%);
  --gradient-hero-light: linear-gradient(160deg, #F0FDFA 0%, #F0F9FF 40%, #FAFBFD 70%, #FFFFFF 100%);
  --gradient-dark-section: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%);
  --gradient-tech-mesh: radial-gradient(ellipse 60% 50% at 20% 30%, rgba(13, 155, 133, 0.12) 0%, transparent 50%),
                        radial-gradient(ellipse 50% 40% at 80% 70%, rgba(6, 182, 212, 0.08) 0%, transparent 50%),
                        radial-gradient(ellipse 40% 30% at 50% 50%, rgba(13, 155, 133, 0.06) 0%, transparent 40%);
  --gradient-card-shine: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.03) 50%, transparent 60%);
  --gradient-scan: linear-gradient(180deg, transparent, rgba(13, 155, 133, 0.08) 40%, rgba(13, 155, 133, 0.15) 50%, rgba(13, 155, 133, 0.08) 60%, transparent);
  --gradient-dot-grid: radial-gradient(circle 1px at center, rgba(13, 155, 133, 0.15) 0%, transparent 100%);

  /* Glass tokens */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-blur: 12px;
  --glass-bg-dark: rgba(255, 255, 255, 0.06);
  --glass-border-dark: rgba(255, 255, 255, 0.1);
  --glass-bg-premium: rgba(255, 255, 255, 0.04);
  --glass-border-glow: rgba(13, 155, 133, 0.2);
  --glass-blur-heavy: 24px;

  /* Grain texture (SVG noise) */
  --grain-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");

  /* Transitions */
  --transition-micro: 100ms ease;
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-reveal: 700ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-Index */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-fab: 500;
}