/**
 * CoachPro Tools — Design Tokens (FUENTE DE VERDAD)
 * ─────────────────────────────────────────────────────────────────
 * Único origen de tipografía, espaciado, radios, sombras y color de
 * todo el sistema (dashboard, herramientas, PDF, páginas públicas).
 * Extraído de dashboard.html (el referente). Si un valor cambia acá,
 * cambia en todas las superficies que consumen estas variables.
 *
 * Reglas:
 *  - Prefijo --cp-* para no chocar con tokens legacy del dashboard.
 *  - #203590 (navy) es el ancla del White Label: el override dinámico
 *    de WL lo reemplaza en runtime. No romper ese hook.
 *  - Emails NO consumen este archivo (los clientes de correo no soportan
 *    variables CSS): usan los mismos VALORES espejados a mano.
 *  - El texto de <canvas> se setea en JS (ctx.font), no por CSS: para
 *    igualarlo se espejan estos valores en una constante JS.
 */
:root {
  /* ===== TIPOGRAFÍA — familias ===== */
  --cp-font-body: 'Poppins', sans-serif;      /* cuerpo / UI */
  --cp-font-display: 'Sora', sans-serif;      /* títulos, logo, hero */

  /* ===== TIPOGRAFÍA — escala (real del dashboard: base 13px contenido / 15px body+inputs) ===== */
  --cp-fs-micro: 10px;     /* micro-labels uppercase (stat-label, status pill) */
  --cp-fs-2xs: 11px;       /* eyebrows, badges mínimos, shortcuts, metadata */
  --cp-fs-xs: 12px;        /* sub-texto, badges, fechas, botones chicos, pills */
  --cp-fs-sm: 13px;        /* BASE contenido: descripciones, labels, hints, celdas */
  --cp-fs-base: 14px;      /* texto primario, títulos de card pequeños */
  --cp-fs-md: 15px;        /* body, inputs/selects/textareas, nombres, valores */
  --cp-fs-lg: 17px;        /* títulos de sección h2/h3 */
  --cp-fs-xl: 18px;        /* títulos de modal / config h3 */
  --cp-fs-2xl: 22px;       /* valores numéricos grandes (stats, resultados) */
  --cp-fs-display: 32px;   /* hero-title */

  /* ===== TIPOGRAFÍA — pesos ===== */
  --cp-fw-regular: 400;    /* párrafos, hints */
  --cp-fw-medium: 500;     /* labels suaves, nav, metadata */
  --cp-fw-semibold: 600;   /* peso de trabajo: títulos, labels, botones */
  --cp-fw-bold: 700;       /* títulos Sora, valores, eyebrows */
  --cp-fw-extrabold: 800;  /* logo, marca WL, hero */

  /* ===== TIPOGRAFÍA — line-height ===== */
  --cp-lh-tight: 1.2;      /* títulos compactos, valores */
  --cp-lh-snug: 1.35;      /* títulos multi-línea, nombres */
  --cp-lh-normal: 1.5;     /* texto / descripciones */
  --cp-lh-relaxed: 1.6;    /* párrafos largos */

  /* ===== TIPOGRAFÍA — letter-spacing ===== */
  --cp-ls-tight: -.02em;   /* títulos Sora grandes */
  --cp-ls-snug: -.01em;    /* display medio, marca WL */
  --cp-ls-label: .5px;     /* labels uppercase técnicos (.3–.6px) */
  --cp-ls-eyebrow: .05em;  /* eyebrows / chips uppercase */

  /* ===== ESPACIADO — base 4px + medios reales (6/10/14) ===== */
  --cp-sp-1: 4px;
  --cp-sp-1-5: 6px;
  --cp-sp-2: 8px;
  --cp-sp-2-5: 10px;
  --cp-sp-3: 12px;
  --cp-sp-3-5: 14px;
  --cp-sp-4: 16px;
  --cp-sp-6: 24px;
  --cp-sp-8: 32px;
  --cp-sp-12: 48px;

  /* ===== RADIOS — fieles a la frecuencia real ===== */
  --cp-radius-xs: 6px;     /* botones mini, badges */
  --cp-radius-sm: 8px;     /* botones, nav items */
  --cp-radius-md: 10px;    /* el más usado: inputs, botones, cards chicas */
  --cp-radius-lg: 12px;    /* inputs, cards, modales */
  --cp-radius-xl: 16px;    /* contenedores grandes */
  --cp-radius-2xl: 20px;   /* cards hero / promo */
  --cp-radius-pill: 999px;
  --cp-radius-circle: 50%; /* avatares */

  /* ===== SOMBRAS — capas ===== */
  --cp-shadow-1: 0 1px 2px rgba(10,36,99,.04), 0 1px 3px rgba(10,36,99,.05);
  --cp-shadow-2: 0 2px 6px rgba(10,36,99,.05), 0 8px 20px rgba(10,36,99,.08);
  --cp-shadow-3: 0 4px 10px rgba(10,36,99,.06), 0 16px 40px rgba(10,36,99,.14);
  --cp-shadow-nav: 0 1px 0 rgba(32,53,144,.05), 0 6px 24px rgba(10,36,99,.06);
  --cp-shadow-brand: 0 8px 32px rgba(32,53,144,.06);   /* card shadow histórico */
  --cp-ring-focus: 0 0 0 3px rgba(32,53,144,.08);
  --cp-ring-focus-alert: 0 0 0 3px rgba(192,57,43,.22);

  /* ===== COLOR — marca ===== */
  --cp-navy: #203590;          /* primario (ancla White Label) */
  --cp-navy-dark: #0A2463;     /* hover primario, fondos oscuros */
  --cp-navy-2: #213F95;        /* gradiente con navy */
  --cp-blue: #6083C5;          /* secundario / acento */
  --cp-blue-light: #C5DBF0;    /* bordes suaves */

  /* ===== COLOR — texto (hex reales del dashboard) ===== */
  --cp-text: #1a1a2e;          /* texto principal */
  --cp-text-2: #5a6480;        /* secundario / descripciones */
  --cp-text-muted: #9CA3AF;    /* muted / placeholders / fechas */
  --cp-text-muted-2: #6B7280;  /* muted alternativo */
  --cp-text-neutral: #374151;  /* neutro oscuro (config/labels) */

  /* ===== COLOR — superficies ===== */
  --cp-bg: #F8F9FC;            /* fondo página / sección */
  --cp-surface: #FFFFFF;       /* cards */
  --cp-bg-body: #F0F2F8;       /* fondo auth / loading */

  /* ===== COLOR — sidebar (Notion) ===== */
  --cp-sb-bg: #FBFBFA;
  --cp-sb-text: #37352F;
  --cp-sb-text-mute: #9B9A97;
  --cp-sb-search-bg: #F1F1EF;

  /* ===== COLOR — semánticos (uso estricto: nunca verde/rojo en CTA/bordes) ===== */
  --cp-success: #2E9E6B;   --cp-success-dark: #1f7d54;
  --cp-alert: #C0392B;     --cp-alert-dark: #a12b1f;
  --cp-warn: #F59E0B;      --cp-warn-amber: #D97706;   --cp-warn-dark: #b26500;
  --cp-teal: #0D9488;

  /* ===== COLOR — líneas / bordes ===== */
  --cp-line: rgba(32,53,144,.08);    /* borde suave */
  --cp-line-2: rgba(32,53,144,.12);  /* borde estándar (el más usado) */
  --cp-line-3: rgba(32,53,144,.14);  /* borde marcado */

  /* ===== MOTION ===== */
  --cp-ease: cubic-bezier(.16,1,.3,1);
}