/**
 * Colores oficiales COEDEM — sólidos, sin degradados
 * Teal · Magenta · Verde · Naranja
 */

:root {
  /* Brand COEDEM */
  --coedem-teal: #34a6c2;
  --coedem-teal-dark: #1985a0;
  --coedem-teal-light: #e3f4f8;

  --coedem-magenta: #e63e76;
  --coedem-magenta-dark: #c92d62;

  --coedem-green: #6fcd53;
  --coedem-green-light: #effccd;

  --coedem-orange: #fc9a00;

  --coedem-navy: rgb(33, 39, 57);

  /* Semantic */
  --brand: var(--coedem-teal);
  --brand-dark: var(--coedem-teal-dark);
  --brand-light: var(--coedem-teal-light);

  --accent: var(--coedem-magenta);
  --accent-dark: var(--coedem-magenta-dark);

  --color-bg: #f6fbfc;
  --color-bg-soft: #eef6f9;
  --color-surface: #ffffff;
  --color-surface-glass: rgba(255, 255, 255, 0.96);

  --color-text: #1a2332;
  --color-text-muted: #5c6b7a;
  --color-text-on-dark: #ffffff;
  --color-border: rgba(52, 166, 194, 0.22);

  --color-footer: var(--coedem-teal-dark);
  --color-error: #dc3545;
  --color-success-bg: var(--coedem-green-light);
  --color-success-border: var(--coedem-green);
  --color-success-text: #2d6a24;

  /* Aliases usados en estilos */
  --color-primary: var(--coedem-magenta);
  --color-primary-dark: var(--coedem-magenta-dark);
  --color-secondary: var(--coedem-teal);
  --color-secondary-dark: var(--coedem-teal-dark);

  --font-body: "Quicksand", system-ui, sans-serif;
  --font-display: "Oswald", "Quicksand", sans-serif;

  --bg-shape: #94a3b8;
  --bg-shape-ring: #94a3b8;

  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.35rem;
  --text-2xl: clamp(1.75rem, 5vw, 2.35rem);
  --text-counter: clamp(3rem, 12vw, 4.25rem);

  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  --shadow-soft: 0 8px 28px rgba(52, 166, 194, 0.12);
  --shadow-card: 0 12px 36px rgba(26, 35, 50, 0.08);
  --shadow-focus: 0 0 0 4px rgba(52, 166, 194, 0.28);

  --duration-fast: 180ms;
  --duration-normal: 280ms;
  --ease-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
  }
}