/* CORDA · Tokens de diseño
   Fuente única de colores, tipografía, espaciado, radios y sombras.
   Los componentes usan solo var(--token). No agregues valores fuera de este archivo. */

/* ---------- Colores de marca (iguales en ambos temas) ---------- */
:root {
  --verde-corda: #0F3B2C;  /* 60 %, fondo dominante */
  --verde-medio: #1E6B4F;  /* gráficas, selección, bloques secundarios */
  --verde-noche: #0A2920;  /* navegación, pie, overlay de video al 60–70 % */
  --arena:       #D9C49A;  /* 30 %, tarjetas destacadas, bloques editoriales */
  --lima:        #C8F03C;  /* 10 %, solo acción principal, logros, objetivos, punto del logo */
  --on-lima:     #0E2A20;  /* texto sobre lima, nunca blanco */
  --marfil:      #F4EFE3;  /* el "blanco" de la marca; #FFFFFF está prohibido como fondo */

  /* ---------- Tipografía ---------- */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; /* títulos, cifras, logo */
  --font-sans:    "DM Sans", "Helvetica Neue", Arial, sans-serif;       /* texto e interfaz */

  /* tamaño / interlineado / peso / tracking */
  --display-size: 64px;  --display-line: 64px;  --display-weight: 700;  --display-tracking: -0.03em;
  --h1-size: 40px;       --h1-line: 44px;       --h1-weight: 700;       --h1-tracking: -0.02em;
  --h2-size: 28px;       --h2-line: 32px;       --h2-weight: 600;       --h2-tracking: -0.01em;
  --h3-size: 20px;       --h3-line: 26px;       --h3-weight: 600;
  --metric-size: 48px;   --metric-line: 48px;   --metric-weight: 600;   --metric-tracking: -0.02em;
  --eyebrow-size: 12px;  --eyebrow-line: 16px;  --eyebrow-weight: 600;  --eyebrow-tracking: 0.14em;
  --body-lg-size: 18px;  --body-lg-line: 28px;  --body-lg-weight: 400;
  --body-size: 16px;     --body-line: 24px;     --body-weight: 400;
  --label-size: 14px;    --label-line: 20px;    --label-weight: 600;
  --small-size: 14px;    --small-line: 20px;    --small-weight: 400;
  --caption-size: 12px;  --caption-line: 16px;  --caption-weight: 500;
  --logo-tracking: -0.02em;

  /* ---------- Espaciado (base 4px) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-20: 80px;

  /* ---------- Radios ---------- */
  --radius-sm: 6px;     /* inputs, badges */
  --radius-md: 12px;    /* botones, tarjetas */
  --radius-lg: 20px;    /* paneles, modales, video */
  --radius-pill: 999px; /* solo punto del logo, avatares y píldora de estado */
}

/* En móvil, display baja a 44/48 y h1 a 32/36. */
@media (max-width: 680px) {
  :root {
    --display-size: 44px; --display-line: 48px;
    --h1-size: 32px;      --h1-line: 36px;
  }
}

/* ---------- Tema "cancha" (default: app y landing) ---------- */
:root,
[data-theme="cancha"] {
  --surface:        #0F3B2C;
  --surface-raised: #164A38;
  --surface-deep:   #0A2920;
  --ink:            #F4EFE3;
  --ink-muted:      #B4C4B8;
  --accent-text:    #C8F03C; /* cifras de mejora */
  --line:           #2A5E4A; /* bordes 1px */
  --danger:         #FF9A8C;
  --focus-ring:     #C8F03C;
  --shadow-card:    0 8px 24px rgba(4,20,14,.35);
  --logo-dot:       var(--lima);
  color-scheme: dark;
}

/* ---------- Tema "arena" (documentos, propuestas e impresos) ---------- */
[data-theme="arena"] {
  --surface:        #F6F1E6;
  --surface-raised: #FFFDF8;
  --surface-deep:   #EAE0CB;
  --ink:            #0E2A20;
  --ink-muted:      #4A5C52;
  --accent-text:    #2E6B1F;
  --line:           #CDBF9F;
  --danger:         #B42318;
  --focus-ring:     #1E6B4F;
  --shadow-card:    0 8px 24px rgba(14,42,32,.10);
  --logo-dot:       var(--verde-medio); /* en arena, el punto del logo va en verde medio */
  color-scheme: light;
}