/* ==========================================================================
   EV TOKENS · fuente única de variables del sistema de diseño erikvidal.cl
   Se carga antes de ev-framework.css. Editar aquí y copiar a 02-sistema-diseno/tokens.css
   (son el mismo archivo). Nombres: ver 02-sistema-diseno/convenciones.md
   ========================================================================== */

/* 1. TOKENS ================================================================ */
:root{
  /* Brand identity (framework original) */
  --ev-color-primary: #0284c7;
  --ev-color-primary-hover: #0369a1;
  --ev-color-cyan-bright: #00a8e8;
  --ev-color-dark: #0f172a;
  --ev-color-navy: #1e293b;
  --ev-color-bg-light: #f8fafc;
  --ev-color-bg-alt: #f0f9ff;
  --ev-color-text: #334155;
  --ev-color-muted: #64748b;
  --ev-color-border: #e2e8f0;
  --ev-color-border-glow: #bae6fd;

  /* Acentos (íconos, estados) */
  --ev-sky: #0284c7;     --ev-tint-sky: #f0f9ff;
  --ev-amber: #b45309;   --ev-tint-amber: #fffbeb;
  --ev-emerald: #047857; --ev-tint-emerald: #ecfdf5;
  --ev-indigo: #4f46e5;  --ev-tint-indigo: #eef2ff;
  --ev-rose: #e11d48;    --ev-tint-rose: #fff1f2;

  /* Semánticos (light por defecto) */
  --ev-bg: var(--ev-color-bg-light);
  --ev-bg-alt: #ffffff;
  --ev-surface: #ffffff;
  --ev-surface-2: #f1f5f9;
  --ev-tint: var(--ev-color-bg-alt);
  --ev-heading: var(--ev-color-dark);
  --ev-text: var(--ev-color-text);
  --ev-muted: var(--ev-color-muted);
  --ev-border: var(--ev-color-border);
  --ev-border-strong: #cbd5e1;
  --ev-link: var(--ev-color-primary);
  --ev-link-hover: var(--ev-color-primary-hover);
  --ev-accent-text: var(--ev-color-primary);
  --ev-badge-border: rgba(2, 132, 199, 0.2);
  --ev-header-bg: rgba(255, 255, 255, 0.84);
  --ev-grid-dot: rgba(2, 132, 199, 0.11);
  --ev-btn-dark-bg: var(--ev-color-dark);
  --ev-btn-dark-hover: var(--ev-color-navy);
  --ev-btn-dark-border: transparent;
  --ev-dark-from: var(--ev-color-dark);
  --ev-dark-to: var(--ev-color-navy);

  /* Tipografía */
  --ev-font-main: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ev-text-xs: clamp(0.75rem, 0.73rem + 0.09vw, 0.8125rem);
  --ev-text-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --ev-text-base: clamp(1rem, 0.96rem + 0.19vw, 1.125rem);
  --ev-text-lg: clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);
  --ev-text-xl: clamp(1.25rem, 1.15rem + 0.46vw, 1.5625rem);
  --ev-text-2xl: clamp(1.5rem, 1.35rem + 0.65vw, 1.9375rem);
  --ev-text-3xl: clamp(1.75rem, 1.5rem + 1.11vw, 2.5rem);
  --ev-text-4xl: clamp(2rem, 1.58rem + 1.85vw, 3.25rem);
  --ev-text-5xl: clamp(2.25rem, 1.58rem + 2.96vw, 4.25rem);
  --ev-text-6xl: clamp(2.5rem, 1.58rem + 4.07vw, 5.25rem);
  --ev-leading-tight: 1.1;
  --ev-leading-snug: 1.3;
  --ev-leading-normal: 1.65;
  --ev-tracking-tight: -0.03em;
  --ev-tracking-wide: 0.1em;

  /* Espaciado fluido (360px → 1440px) */
  --ev-space-3xs: clamp(0.25rem, 0.21rem + 0.19vw, 0.375rem);
  --ev-space-2xs: clamp(0.5rem, 0.46rem + 0.19vw, 0.625rem);
  --ev-space-xs: clamp(0.75rem, 0.67rem + 0.37vw, 1rem);
  --ev-space-s: clamp(1rem, 0.875rem + 0.56vw, 1.375rem);
  --ev-space-m: clamp(1.5rem, 1.33rem + 0.74vw, 2rem);
  --ev-space-l: clamp(2rem, 1.67rem + 1.48vw, 3rem);
  --ev-space-xl: clamp(3rem, 2.5rem + 2.22vw, 4.5rem);
  --ev-space-2xl: clamp(4rem, 3.17rem + 3.7vw, 6.5rem);
  --ev-section-space: clamp(3.5rem, 2.17rem + 5.93vw, 7.5rem);
  --ev-gutter: clamp(1.25rem, 0.83rem + 1.85vw, 2.5rem);

  /* Layout */
  --ev-container-max: 1280px;
  --ev-container-narrow: 820px;
  --ev-header-h: 76px;
  --ev-appbar-h: 72px;

  /* Formas y elevación (framework original) */
  --ev-radius-sm: 10px;
  --ev-radius-card: 20px;
  --ev-radius-btn: 14px;
  --ev-radius-lg: 32px;
  --ev-radius-pill: 9999px;
  --ev-shadow-card: 0 20px 40px -15px rgba(2, 132, 199, 0.08), 0 10px 20px -10px rgba(15, 23, 42, 0.04);
  --ev-shadow-hover: 0 25px 50px -12px rgba(2, 132, 199, 0.18);
  --ev-shadow-glow: 0 0 30px rgba(2, 132, 199, 0.25);

  /* Movimiento */
  --ev-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --ev-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

/* Dark mode global — :root[data-theme] (especificidad 0,2,0) gana a cualquier
   :root { } que imprima Bricks (variables globales), sin importar el orden. */
:root[data-theme="dark"]{
  --ev-bg: #0b1120;
  --ev-bg-alt: #0e1628;
  --ev-surface: #121c31;
  --ev-surface-2: #18243b;
  --ev-tint: rgba(2, 132, 199, 0.12);
  --ev-heading: #f1f5f9;
  --ev-text: #cbd5e1;
  --ev-muted: #94a3b8;
  --ev-border: rgba(148, 163, 184, 0.16);
  --ev-border-strong: rgba(148, 163, 184, 0.3);
  --ev-link: #38bdf8;
  --ev-link-hover: #7dd3fc;
  --ev-accent-text: #38bdf8;
  --ev-badge-border: rgba(56, 189, 248, 0.28);
  --ev-header-bg: rgba(11, 17, 32, 0.8);
  --ev-grid-dot: rgba(56, 189, 248, 0.1);
  --ev-btn-dark-bg: #1e293b;
  --ev-btn-dark-hover: #273449;
  --ev-btn-dark-border: rgba(255, 255, 255, 0.1);
  --ev-dark-from: #0f1b31;
  --ev-dark-to: #0a1222;
  --ev-color-border-glow: rgba(56, 189, 248, 0.4);
  --ev-shadow-card: 0 20px 40px -20px rgba(0, 0, 0, 0.55);
  --ev-shadow-hover: 0 25px 50px -12px rgba(2, 132, 199, 0.28);
  color-scheme: dark;
}

/* Acentos sobre fondos oscuros (dark mode + bloques oscuros) */
:root[data-theme="dark"],
:root .ev-section--dark, :root .ev-card--dark, :root .ev-cta, :root .ev-footer, :root .ev-status--dark, :root .ev-widget--dark{
  --ev-sky: #38bdf8;     --ev-tint-sky: rgba(56, 189, 248, 0.14);
  --ev-amber: #fbbf24;   --ev-tint-amber: rgba(251, 191, 36, 0.14);
  --ev-emerald: #34d399; --ev-tint-emerald: rgba(52, 211, 153, 0.14);
  --ev-indigo: #a5b4fc;  --ev-tint-indigo: rgba(165, 180, 252, 0.14);
  --ev-rose: #fb7185;    --ev-tint-rose: rgba(251, 113, 133, 0.14);
}

/* Bloques oscuros: tokens locales (los componentes se adaptan solos) */
:root .ev-section--dark, :root .ev-card--dark, :root .ev-cta, :root .ev-footer, :root .ev-status--dark, :root .ev-widget--dark{
  --ev-heading: #ffffff;
  --ev-text: #cbd5e1;
  --ev-muted: #94a3b8;
  --ev-border: rgba(255, 255, 255, 0.1);
  --ev-border-strong: rgba(255, 255, 255, 0.2);
  --ev-surface: rgba(255, 255, 255, 0.04);
  --ev-surface-2: rgba(255, 255, 255, 0.07);
  --ev-tint: rgba(56, 189, 248, 0.12);
  --ev-link: #38bdf8;
  --ev-link-hover: #7dd3fc;
  --ev-accent-text: #38bdf8;
  --ev-badge-border: rgba(56, 189, 248, 0.3);
  --ev-grid-dot: rgba(125, 211, 252, 0.09);
  --ev-btn-dark-bg: rgba(255, 255, 255, 0.08);
  --ev-btn-dark-hover: rgba(255, 255, 255, 0.14);
  --ev-btn-dark-border: rgba(255, 255, 255, 0.14);
  --ev-color-border-glow: rgba(56, 189, 248, 0.45);
  --ev-shadow-card: none;
  color: var(--ev-text);
}