/**
 * CuídateGratis — Design Tokens v1.0
 * Fuente de verdad. No usar !important aquí.
 * Todos los valores extraídos del codebase existente.
 */
:root {
  /* — Color palette — */
  --cgc-green-950: #06281f;
  --cgc-green-900: #0f3d2e;
  --cgc-green-800: #123f2d;
  --cgc-green-700: #1f6b45;
  --cgc-green-600: #2f7d57;
  --cgc-green-100: #eaf5ee;
  --cgc-green-50: #f4f6f4;
  --cgc-cream: #fffdf8;
  --cgc-bg: #f6f8f6;
  --cgc-white: #ffffff;
  --cgc-text-primary: #10231a;
  --cgc-text-secondary: #4f5f58;
  --cgc-text-muted: #5f6b66;
  --cgc-border: #dde7e1;
  --cgc-border-md: rgba(18, 24, 20, 0.12);
  --cgc-gold: #e5b91e;
  --cgc-gold-dark: #d99b45;

  /* — Typography — */
  --cgc-font-sans: 'Outfit', 'Inter', system-ui, sans-serif;
  --cgc-font-size-xs: 0.72rem;
  --cgc-font-size-sm: 0.86rem;
  --cgc-font-size-md: 1rem;
  --cgc-font-size-lg: 1.15rem;
  --cgc-font-size-xl: 1.35rem;

  /* — Spacing — */
  --cgc-space-1: 4px;
  --cgc-space-2: 8px;
  --cgc-space-3: 12px;
  --cgc-space-4: 16px;
  --cgc-space-6: 24px;
  --cgc-space-8: 32px;
  --cgc-space-12: 48px;

  /* — Radii — */
  --cgc-radius-sm: 12px;
  --cgc-radius-md: 18px;
  --cgc-radius-lg: 26px;
  --cgc-radius-xl: 34px;

  /* — Header — */
  --cgc-header-height: 72px;
  --cgc-header-height-md: 58px;
  --cgc-header-height-sm: 54px;

  /* — Breakpoints como custom properties de referencia (no usables en @media) — */
  /* bp-sm: 480px | bp-md: 820px | bp-lg: 900px | bp-xl: 1100px | bp-2xl: 1320px */

  /* — Shadows — */
  --cgc-shadow-sm: 0 4px 12px rgba(15, 61, 46, 0.08);
  --cgc-shadow-md: 0 12px 32px rgba(15, 61, 46, 0.12);
  --cgc-shadow-lg: 0 22px 52px rgba(15, 61, 46, 0.16);

  /* — Z-index scale — */
  --cgc-z-base: 0;
  --cgc-z-raised: 10;
  --cgc-z-overlay: 100;
  --cgc-z-header: 1000;
  --cgc-z-nav: 1100;
  --cgc-z-modal: 2000;
}

/* Modo oscuro */
html[data-theme="dark"],
html.cg-dark {
  --cgc-bg: #0b1d13;
  --cgc-cream: #0e2318;
  --cgc-white: #0f2a1c;
  --cgc-text-primary: #eef7e9;
  --cgc-text-secondary: #a8c4b0;
  --cgc-text-muted: #7a9e86;
  --cgc-border: rgba(255, 255, 255, 0.12);
  --cgc-border-md: rgba(255, 255, 255, 0.16);
}