/* CTRL MEDIA — TOKENS (v1.0)
   Contrato: fuente única de variables de diseño consumidas por todo el sistema. */

:root {
  /* Layout */
  --cm-vh: 100vh;
  --cm-vw: 100vw;
  --cm-max: 1200px;

  /* Spacing (Jobs: pocos, consistentes) */
  --cm-space-1: 8px;
  --cm-space-2: 12px;
  --cm-space-3: 16px;
  --cm-space-4: 24px;
  --cm-space-5: 32px;
  --cm-space-6: 48px;
  --cm-space-7: 64px; /* usado por CTA bottom */

  /* Radius */
  --cm-radius-1: 12px;
  --cm-radius-2: 18px;
  --cm-radius-3: 24px;

  /* Z-index map */
  --cm-z-panel: 1;
  --cm-z-overlay: 2;
  --cm-z-content: 3;
  --cm-z-nav: 40;
  --cm-z-cta: 50;
  --cm-z-modal: 60;

  /* Typography */
  --cm-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text",
  "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --cm-font-weight-regular: 400;
  --cm-font-weight-medium: 500;
  --cm-font-weight-semibold: 600;

  /* Type scale */
  --cm-text-xs: 12px;
  --cm-text-sm: 14px;
  --cm-text-md: 16px;
  --cm-text-lg: 27px;
  --cm-text-xl: 42px;
  --cm-text-2xl: 60px;

  /* Line heights */
  --cm-lh-tight: 1.1;
  --cm-lh-normal: 1.35;
  --cm-lh-relaxed: 1.55;

  /* Colors (grayscale control) */
  --cm-black: #050607;
  --cm-ink: #0b0d10;
  --cm-slate: #11151b;
  --cm-charcoal: #161b22;
  --cm-fog: rgba(255, 255, 255, 0.10);
  --cm-fog-2: rgba(255, 255, 255, 0.14);
  --cm-line: rgba(255, 255, 255, 0.12);
  --cm-text: rgba(255, 255, 255, 0.92);
  --cm-muted: rgba(255, 255, 255, 0.68);
  --cm-dim: rgba(255, 255, 255, 0.48);

  /* NEW: Editorial light (para Portafolio L5 bis) */
  --cm-editorial-bg: #f2f3f0;   /* blanco editorial (no puro) */
  --cm-editorial-ink: #11151b;  /* correlación con slate */
  --cm-editorial-line: rgba(17, 21, 27, 0.14);

  /* Glass (base) */
  --cm-glass-bg: rgba(18, 22, 28, 0.45);
  --cm-glass-border: rgba(255, 255, 255, 0.14);
  --cm-glass-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  --cm-blur: 18px;

  /* Glass (atmósfera: un poco más transparente) */
  --cm-glass-a: 0.34;        /* default glass */
  --cm-glass-a-strong: 0.44; /* para capas que necesiten un poco más de presencia */
  --cm-blur-strong: 22px;

  /* Grain / overlays */
  --cm-grain-opacity: 0.08;
  --cm-vignette: rgba(0, 0, 0, 0.35);

  /* Motion (base; se afina en Paso 2) */
  --cm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --cm-dur-1: 160ms;
  --cm-dur-2: 260ms;
  --cm-dur-3: 420ms;
  --cm-dur-4: 700ms;

  /* CTA sizing */
  --cm-cta-h: 48px;
  --cm-cta-pad-x: 18px;

  /* Safe areas (iOS) */
  --cm-safe-top: env(safe-area-inset-top);
  --cm-safe-right: env(safe-area-inset-right);
  --cm-safe-bottom: env(safe-area-inset-bottom);
  --cm-safe-left: env(safe-area-inset-left);

  /* Contrato: tokens de acento compartidos por CTA, NAV y panels. */
  --cm-green: #C9F000;   /* Verde Control Media */
  --cm-yellow: #F2E85C;  /* Amarillo Control Media */

  /* Accent activo del sistema (para halos/bordes) */
  --cm-accent: var(--cm-green);

  /* Helpers (tintes/halos) */
  --cm-accent-10: rgba(201, 240, 0, 0.10);
  --cm-accent-16: rgba(201, 240, 0, 0.16);
  --cm-accent-22: rgba(201, 240, 0, 0.22);

  /* CTA tint (verde + amarillo, muy leve) */
  --cm-cta-tint-g: rgba(201, 240, 0, 0.18);
  --cm-cta-tint-y: rgba(242, 232, 92, 0.14);

  /* Contrato: material "liquid glass" compartido por CTA, NAV y paneles. */
  /* base glass */
  --cm-glass-a-liquid: 0.06;        /* más translúcido (más influencia del fondo) */
  --cm-glass-a-liquid-strong: 0.10; /* panel/menú un pelín más sólido */
  --cm-blur-liquid: 14px;           /* blur difuso (no excesivo) */

  /* tinte Control Media (solo indicio) */
  --cm-tint-1: rgba(113, 211, 244, 0.14); /* #71D3F4 */
  --cm-tint-2: rgba(113, 211, 244, 0.10); /* #71D3F4 */
}