/* ==========================================================================
   DESIGN TOKENS — Dra. Odette Noyola Landázuri
   Clinical luxury, minimal, warm & modern
   ========================================================================== */

:root {
  /* ── Color Palette ─────────────────────────────────────────────────── */

  /* Primary: Obsidian Luxury Spectrum */
  --color-obsidian-950: #04080F;
  --color-obsidian-900: #07111C;
  --color-obsidian-850: #0B1827;
  --color-obsidian-800: #0F2033;
  --color-obsidian-700: #172D46;
  --color-obsidian-600: #213C5C;
  --color-obsidian-100: #E6ECF2;
  --color-obsidian-50:  #F2F6FA;

  /* Accent: Clinical Teal / Emerald */
  --color-teal-600: #0D7A75;
  --color-teal-500: #10918B;
  --color-teal-400: #14A8A1;
  --color-teal-100: #D0F0EE;
  --color-teal-50:  #ECFAF9;

  /* Accent: Warm Rose */
  --color-rose-600: #C25975;
  --color-rose-500: #D4687F;
  --color-rose-400: #E0899E;
  --color-rose-300: #EAACBC;
  --color-rose-200: #F2CED8;
  --color-rose-100: #FAE8ED;
  --color-rose-50:  #FDF4F6;

  /* Accent: Soft Gold */
  --color-gold-500: #C9A84C;
  --color-gold-400: #D4BA6A;
  --color-gold-100: #F5EED4;

  /* CTA: WhatsApp */
  --color-whatsapp: #25D366;
  --color-whatsapp-hover: #1EBE5D;
  --color-whatsapp-dark: #128C7E;

  /* CTA: Urgency Red */
  --color-urgency: #DC2626;
  --color-urgency-hover: #B91C1C;
  --color-urgency-glow: rgba(220, 38, 38, 0.4);

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-gray-50:  #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;
  --color-black: #000000;

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

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */

  --leading-tight:  1.2;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;

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

  /* ── Border Radius ─────────────────────────────────────────────────── */
  --radius-sm:   0.375rem;  /* 6px */
  --radius-md:   0.5rem;    /* 8px */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-2xl:  1.25rem;   /* 20px — dark study cards */
  --radius-3xl:  1.5rem;    /* 24px */
  --radius-full: 9999px;    /* pill buttons, avatar */

  /* ── Shadows ───────────────────────────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  --shadow-2xl:  0 25px 50px -12px rgba(0, 0, 0, 0.2);
  --shadow-card: 0 4px 24px rgba(9, 25, 44, 0.08);
  --shadow-float: 0 8px 32px rgba(9, 25, 44, 0.15);

  /* ── Transitions ───────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;

  /* ── Z-Index Layers ────────────────────────────────────────────────── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-navbar:   300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-floating: 600;
  --z-urgency:  700;

  /* ── Layout ────────────────────────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1400px;

  --navbar-height: 76px;
  --urgency-bar-height: 40px;
}