/* ============================================
   DAMO Group — Design Tokens
   ============================================ */

:root {
  /* ──────────────────────────────────────────────
     COLOR TOKENS — Semantic roles
     Gold     = Primary brand (hero, CTA, active, dividers)
     Turquoise = Data/info accent (stats, data-viz, info links)
     Two-level background only (primary / secondary)
     ────────────────────────────────────────────── */

  /* ──────────────────────────────────────────────
     COLOR SCALES — 50 (lightest) → 900 (darkest)
     Gold scale: brand primary (warm amber)
     Turquoise scale: data/info accent (cool cyan)
     Neutral scale: backgrounds + text
     ────────────────────────────────────────────── */

  /* Gold scale */
  --gold-50:  #FBF6EC;
  --gold-100: #F5E8C8;
  --gold-200: #EBD09A;
  --gold-300: #E0B86C;
  --gold-400: #D4A853;  /* primary brand (= legacy --accent-gold) */
  --gold-500: #B8892E;  /* darker brand (= legacy --accent-gold-dark) */
  --gold-600: #946D1E;
  --gold-700: #6F5414;
  --gold-800: #4B3A0E;
  --gold-900: #2A2108;

  /* Turquoise scale */
  --turquoise-50:  #E5F8FC;
  --turquoise-100: #BFECF5;
  --turquoise-200: #86DCEC;
  --turquoise-300: #4AC9E2;
  --turquoise-400: #00B4D8;  /* primary data accent (= legacy --accent-turquoise) */
  --turquoise-500: #0096B4;
  --turquoise-600: #0077B6;  /* legacy --accent-turquoise-dim */
  --turquoise-700: #005D8D;
  --turquoise-800: #074364;
  --turquoise-900: #062E45;

  /* Neutral scale (cool blue-gray) */
  --neutral-50:  #F8FAFC;
  --neutral-100: #EBF0F7;
  --neutral-200: #CED7E3;
  --neutral-300: #B8C4D4;
  --neutral-400: #8A94A6;
  --neutral-500: #6B7A8D;
  --neutral-600: #4A5568;
  --neutral-700: #2C3647;
  --neutral-800: #13223D;
  --neutral-900: #0A1628;

  /* Backgrounds (map to neutral scale) */
  --bg-primary: var(--neutral-900);
  --bg-secondary: var(--neutral-800);
  --bg-card: rgba(255, 255, 255, 0.04);
  --bg-card-hover: rgba(255, 255, 255, 0.08);

  /* Semantic aliases (keep legacy names for backward compat) */
  --accent-gold:          var(--gold-400);
  --accent-gold-light:    var(--gold-300);
  --accent-gold-dark:     var(--gold-500);
  --accent-turquoise:     var(--turquoise-400);
  --accent-turquoise-dim: var(--turquoise-600);
  --accent-turquoise-glow: rgba(0, 180, 216, 0.3);

  /* Text */
  --text-primary:   #FFFFFF;
  --text-secondary: var(--neutral-300);
  --text-muted:     var(--neutral-500);

  /* Borders */
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-gold:  rgba(212, 168, 83, 0.3);

  /* Status */
  --success: #2ECC71;
  --error:   #E74C3C;
  --warning: #F39C12;
  --info:    var(--turquoise-400);

  /* ── Gradients ── */
  --gradient-hero: linear-gradient(135deg, #0A1628 0%, #112240 50%, #0D1B2A 100%);
  --gradient-gold: linear-gradient(135deg, #D4A853, #E8C97A);
  --gradient-card: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  --gradient-turquoise: linear-gradient(135deg, #00B4D8, #0077B6);
  --gradient-overlay: linear-gradient(180deg, rgba(10,22,40,0.6) 0%, rgba(10,22,40,0.9) 100%);

  /* ── Typography ── */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;

  --fs-hero: clamp(2.75rem, 7vw + 1rem, 6.5rem);
  --fs-display: clamp(3.5rem, 9vw + 1rem, 8rem);
  --fs-h2: clamp(2rem, 4vw + 0.5rem, 3.5rem);
  --fs-h2-hero: clamp(2.25rem, 5vw + 0.5rem, 4rem);    /* large section headers */
  --fs-h2-compact: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem); /* inner sub-sections */
  --fs-h3: clamp(1.25rem, 2vw, 1.625rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-overline: 0.8125rem;
  --fs-nav: 0.8125rem;

  /* Editorial tracking/leading */
  --tracking-tight: -0.03em;
  --tracking-snug: -0.02em;
  --tracking-wide: 0.18em;
  --leading-hero: 0.95;
  --leading-heading: 1.05;

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

  /* ── Spacing ── */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  --section-padding: clamp(4rem, 8vw, 8rem);
  --container-width: 1200px;
  --container-wide: 1400px;

  /* ── Borders & Radius ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 50%;

  /* ── Shadows ── */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 8px 40px rgba(0, 0, 0, 0.5);
  --shadow-gold-glow: 0 0 30px rgba(212, 168, 83, 0.15);
  --shadow-turquoise-glow: 0 0 30px rgba(0, 180, 216, 0.15);

  /* ──────────────────────────────────────────────
     MOTION TOKENS — Unified easing system
     --ease-out-premium: editorial ease-out (2025 standard)
     --ease-spring: tactile bounce for micro-interactions
     Durations: 250ms (hover), 400ms (UI), 700ms (reveal)
     ────────────────────────────────────────────── */
  --ease-out-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --duration-hover: 250ms;
  --duration-ui: 400ms;
  --duration-reveal: 700ms;

  --transition-fast: var(--duration-hover) var(--ease-out-premium);
  --transition-base: var(--duration-ui) var(--ease-out-premium);
  --transition-slow: 500ms var(--ease-out-premium);
  --transition-spring: 600ms var(--ease-spring);

  /* ── Z-index ── */
  --z-nav: 1000;
  --z-modal: 2000;
  --z-overlay: 500;
  --z-particles: 1;

  /* ──────────────────────────────────────────────
     CARD VARIANT TOKENS (dark theme)
     Each variant exposes: --cv-<v>-{color,tint,border,shadow,ring}
     color  = solid (icon, accent)
     tint   = icon badge background
     border = card border at rest + hover intensifier
     shadow = hover lift glow
     ring   = focus-visible outline
     ────────────────────────────────────────────── */
  --cv-gold-color:   #D4A853;
  --cv-gold-tint:    rgba(212, 168, 83, 0.12);
  --cv-gold-border:  rgba(212, 168, 83, 0.28);
  --cv-gold-shadow:  rgba(212, 168, 83, 0.35);
  --cv-gold-ring:    rgba(212, 168, 83, 0.5);

  --cv-turquoise-color:  #00B4D8;
  --cv-turquoise-tint:   rgba(0, 180, 216, 0.12);
  --cv-turquoise-border: rgba(0, 180, 216, 0.28);
  --cv-turquoise-shadow: rgba(0, 180, 216, 0.35);
  --cv-turquoise-ring:   rgba(0, 180, 216, 0.5);

  --cv-emerald-color:  #10B981;
  --cv-emerald-tint:   rgba(16, 185, 129, 0.14);
  --cv-emerald-border: rgba(16, 185, 129, 0.28);
  --cv-emerald-shadow: rgba(16, 185, 129, 0.35);
  --cv-emerald-ring:   rgba(16, 185, 129, 0.5);

  --cv-violet-color:  #8B5CF6;
  --cv-violet-tint:   rgba(139, 92, 246, 0.14);
  --cv-violet-border: rgba(139, 92, 246, 0.30);
  --cv-violet-shadow: rgba(139, 92, 246, 0.38);
  --cv-violet-ring:   rgba(139, 92, 246, 0.55);

  --cv-amber-color:  #F59E0B;
  --cv-amber-tint:   rgba(245, 158, 11, 0.13);
  --cv-amber-border: rgba(245, 158, 11, 0.28);
  --cv-amber-shadow: rgba(245, 158, 11, 0.35);
  --cv-amber-ring:   rgba(245, 158, 11, 0.5);
}

/* ============================================
   Light Theme Override — Medical Blue
   ============================================ */
[data-theme="light"] {
  --bg-primary: #F5F7FA;
  --bg-secondary: #FFFFFF;
  --bg-card: rgba(30, 136, 229, 0.04);
  --bg-card-hover: rgba(30, 136, 229, 0.08);

  --accent-gold: #1E88E5;
  --accent-gold-light: #42A5F5;
  --accent-gold-dark: #1565C0;
  --accent-turquoise: #0077B6;
  --accent-turquoise-dim: #005A87;
  --accent-turquoise-glow: rgba(0, 119, 182, 0.15);

  --text-primary: #1A2332;
  --text-secondary: #4A5568;
  --text-muted: #8A94A6;

  --border-glass: rgba(30, 136, 229, 0.10);
  --border-gold: rgba(30, 136, 229, 0.20);

  --gradient-hero: linear-gradient(135deg, #F5F7FA 0%, #E3EDF7 50%, #FFFFFF 100%);
  --gradient-gold: linear-gradient(135deg, #1E88E5, #42A5F5);
  --gradient-card: linear-gradient(135deg, rgba(30, 136, 229, 0.04), rgba(30, 136, 229, 0.01));
  --gradient-overlay: linear-gradient(180deg, rgba(245,247,250,0.6) 0%, rgba(245,247,250,0.9) 100%);

  --shadow-card: 0 4px 24px rgba(30, 136, 229, 0.08);
  --shadow-card-hover: 0 8px 40px rgba(30, 136, 229, 0.14);
  --shadow-gold-glow: 0 0 30px rgba(30, 136, 229, 0.10);
  --shadow-turquoise-glow: 0 0 30px rgba(0, 119, 182, 0.10);

  /* Card variant tokens (light theme — tints denser, colors slightly darker) */
  --cv-gold-color:   #B8892E;
  --cv-gold-tint:    rgba(184, 137, 46, 0.10);
  --cv-gold-border:  rgba(184, 137, 46, 0.35);
  --cv-gold-shadow:  rgba(184, 137, 46, 0.22);
  --cv-gold-ring:    rgba(184, 137, 46, 0.5);

  --cv-turquoise-color:  #0077B6;
  --cv-turquoise-tint:   rgba(0, 119, 182, 0.09);
  --cv-turquoise-border: rgba(0, 119, 182, 0.32);
  --cv-turquoise-shadow: rgba(0, 119, 182, 0.20);
  --cv-turquoise-ring:   rgba(0, 119, 182, 0.5);

  --cv-emerald-color:  #0B8E63;
  --cv-emerald-tint:   rgba(11, 142, 99, 0.10);
  --cv-emerald-border: rgba(11, 142, 99, 0.32);
  --cv-emerald-shadow: rgba(11, 142, 99, 0.22);
  --cv-emerald-ring:   rgba(11, 142, 99, 0.5);

  --cv-violet-color:  #6D3FD1;
  --cv-violet-tint:   rgba(109, 63, 209, 0.10);
  --cv-violet-border: rgba(109, 63, 209, 0.32);
  --cv-violet-shadow: rgba(109, 63, 209, 0.22);
  --cv-violet-ring:   rgba(109, 63, 209, 0.5);

  --cv-amber-color:  #C97E0A;
  --cv-amber-tint:   rgba(201, 126, 10, 0.10);
  --cv-amber-border: rgba(201, 126, 10, 0.32);
  --cv-amber-shadow: rgba(201, 126, 10, 0.22);
  --cv-amber-ring:   rgba(201, 126, 10, 0.5);
}

/* Light-mode specific overrides for elements with hardcoded colors */
[data-theme="light"] .nav {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: rgba(30, 136, 229, 0.08);
}
[data-theme="light"] .nav__links a {
  color: #4A5568;
}
[data-theme="light"] .nav__links a:hover {
  color: #1E88E5;
}
[data-theme="light"] .nav__links a.active {
  color: var(--accent-gold);
}
[data-theme="light"] .logo-accent {
  color: var(--accent-gold);
}
[data-theme="light"] .nav__logo {
  color: #1A2332;
}
[data-theme="light"] .footer {
  background: #E2E8F0;
  color: #4A5568;
}
[data-theme="light"] .footer__title {
  color: #1A2332;
}
[data-theme="light"] .footer__links a {
  color: #6B7A8D;
}
[data-theme="light"] .footer__bottom {
  border-top-color: rgba(30, 136, 229, 0.10);
}
[data-theme="light"] .footer__bottom p {
  color: #8A94A6;
}
[data-theme="light"] .overline {
  color: var(--accent-gold);
}
[data-theme="light"] .btn--primary {
  background: var(--gradient-gold);
  color: #FFFFFF;
}
[data-theme="light"] .btn--outline {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}
[data-theme="light"] .particle {
  opacity: 0.05;
}
[data-theme="light"] .cta-banner {
  background: linear-gradient(135deg, #E3EDF7, #D6E4F0);
}

/* Light mode: scrolled nav — white glass (O6) */
[data-theme="light"] .nav.scrolled {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: rgba(30, 136, 229, 0.08);
  box-shadow: 0 2px 20px rgba(30, 136, 229, 0.06);
}

/* Light mode: partner logos less desaturated (S6) */
[data-theme="light"] .partner-card__logo {
  filter: grayscale(40%) brightness(1);
  opacity: 0.75;
}
[data-theme="light"] .partner-card:hover .partner-card__logo {
  filter: grayscale(0%) brightness(1);
  opacity: 1;
}

[data-theme="light"] .logo-carousel__item {
  filter: grayscale(40%) brightness(1);
  opacity: 0.65;
}
[data-theme="light"] .logo-carousel__item:hover {
  filter: grayscale(0%) brightness(1);
  opacity: 1;
}

/* Smooth theme transitions */
.nav, .glass-card, .footer, section, .cta-banner, .btn {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
h1, h2, h3, h4, p, span, strong, a, label {
  transition: color 0.4s ease;
}