/* DIO Digital Agency — variables de marca. GENERADO por brand-kit/tools/build_tokens.py.
   No editar a mano. v1.1.0 · 2026-09-17 · R4 Placa técnica + Sello compacto · Dirección B */

:root {
  /* ── Paleta ── */
  --dio-petroleo: #0F3D3E;   /* 11.95:1 sobre blanco */
  --dio-niebla: #F3F6F4;   /* 1.09:1 sobre blanco */
  --dio-verde: #2B9670;   /* 3.68:1 sobre blanco */
  --dio-amarillo: #FFC94A;   /* 1.53:1 sobre blanco */
  --dio-tinta: #16191D;   /* 17.63:1 sobre blanco */
  --dio-acero: #2E6F9E;   /* 5.41:1 sobre blanco */
  --dio-cota: #5B8A87;   /* 3.87:1 sobre blanco */
  --dio-petroleo-50: #EAFBFB;   /* 1.07:1 sobre blanco */
  --dio-petroleo-100: #E1ECEA;   /* 1.21:1 sobre blanco */
  --dio-petroleo-200: #BEDBDB;   /* 1.46:1 sobre blanco */
  --dio-petroleo-300: #8EC3C4;   /* 1.95:1 sobre blanco */
  --dio-petroleo-400: #6CA0A1;   /* 2.92:1 sobre blanco */
  --dio-petroleo-500: #4C7F80;   /* 4.51:1 sobre blanco */
  --dio-petroleo-600: #155456;   /* 8.63:1 sobre blanco */
  --dio-petroleo-700: #12494A;   /* 10.11:1 sobre blanco */
  --dio-petroleo-800: #0F3D3E;   /* 11.95:1 sobre blanco */
  --dio-petroleo-900: #0A2E2F;   /* 14.54:1 sobre blanco */
  --dio-petroleo-950: #012021;   /* 17.08:1 sobre blanco */
  --dio-verde-50: #EBFBF3;   /* 1.07:1 sobre blanco */
  --dio-verde-100: #DDF1E8;   /* 1.18:1 sobre blanco */
  --dio-verde-200: #B6E8D1;   /* 1.36:1 sobre blanco */
  --dio-verde-300: #7BD7B0;   /* 1.72:1 sobre blanco */
  --dio-verde-400: #5DB994;   /* 2.38:1 sobre blanco */
  --dio-verde-500: #2B9670;   /* 3.68:1 sobre blanco */
  --dio-verde-600: #2B8C69;   /* 4.15:1 sobre blanco */
  --dio-verde-700: #1F7A5A;   /* 5.26:1 sobre blanco */
  --dio-verde-800: #135B42;   /* 8.07:1 sobre blanco */
  --dio-verde-900: #01402C;   /* 11.86:1 sobre blanco */
  --dio-verde-950: #002719;   /* 16.10:1 sobre blanco */
  --dio-amarillo-50: #FFF9F0;   /* 1.05:1 sobre blanco */
  --dio-amarillo-100: #FFF3D6;   /* 1.10:1 sobre blanco */
  --dio-amarillo-200: #FEE6BE;   /* 1.22:1 sobre blanco */
  --dio-amarillo-300: #FFD897;   /* 1.35:1 sobre blanco */
  --dio-amarillo-400: #FFC94A;   /* 1.53:1 sobre blanco */
  --dio-amarillo-500: #DCA744;   /* 2.18:1 sobre blanco */
  --dio-amarillo-600: #B5820C;   /* 3.41:1 sobre blanco */
  --dio-amarillo-700: #8A6419;   /* 5.36:1 sobre blanco */
  --dio-amarillo-800: #684A07;   /* 8.17:1 sobre blanco */
  --dio-amarillo-900: #473102;   /* 12.29:1 sobre blanco */
  --dio-amarillo-950: #2B1C01;   /* 16.55:1 sobre blanco */
  --dio-gris-50: #F3F6F4;   /* 1.09:1 sobre blanco */
  --dio-gris-100: #EAF0EE;   /* 1.15:1 sobre blanco */
  --dio-gris-200: #E6ECE9;   /* 1.20:1 sobre blanco */
  --dio-gris-300: #D5DED9;   /* 1.37:1 sobre blanco */
  --dio-gris-400: #9CA8A3;   /* 2.46:1 sobre blanco */
  --dio-gris-500: #7B8682;   /* 3.77:1 sobre blanco */
  --dio-gris-600: #56625E;   /* 6.36:1 sobre blanco */
  --dio-gris-700: #434D49;   /* 8.76:1 sobre blanco */
  --dio-gris-800: #2F3834;   /* 12.10:1 sobre blanco */
  --dio-gris-900: #1D2623;   /* 15.51:1 sobre blanco */
  --dio-gris-950: #121A17;   /* 17.71:1 sobre blanco */
  --dio-blanco: #FFFFFF;   /* 1.00:1 sobre blanco */
  --dio-niebla-dark: #B8C9C4;   /* 1.72:1 sobre blanco */
  --dio-ok: #1C7C3E;   /* 5.25:1 sobre blanco */
  --dio-warning: #8A5A00;   /* 5.93:1 sobre blanco */
  --dio-error: #B3261E;   /* 6.54:1 sobre blanco */
  --dio-info: #2E6F9E;   /* 5.41:1 sobre blanco */
  --dio-ok-dark: #7BD7B0;   /* 1.72:1 sobre blanco */
  --dio-warning-dark: #F5C26B;   /* 1.64:1 sobre blanco */
  --dio-error-dark: #F2998F;   /* 2.16:1 sobre blanco */
  --dio-info-dark: #8DBDE3;   /* 2.00:1 sobre blanco */

  /* ── Roles (usar estos en componentes, no la paleta) ── */
  --dio-bg: var(--dio-niebla);
  --dio-surface: var(--dio-blanco);
  --dio-surface-2: var(--dio-gris-200);
  --dio-text: var(--dio-tinta);
  --dio-text-muted: var(--dio-gris-600);
  --dio-accent: var(--dio-petroleo);
  --dio-on-accent: var(--dio-blanco);
  --dio-accent-hover: var(--dio-petroleo-600);
  --dio-accent-active: var(--dio-petroleo-900);
  --dio-focus: var(--dio-verde-700);
  --dio-link: var(--dio-verde-700);
  --dio-link-hover: var(--dio-petroleo);
  --dio-signal: var(--dio-verde);
  --dio-highlight: var(--dio-amarillo);
  --dio-border: var(--dio-gris-300);
  --dio-border-input: var(--dio-gris-500);
  --dio-line: var(--dio-cota);
  --dio-dark-bg: var(--dio-petroleo);
  --dio-dark-surface: var(--dio-petroleo-900);
  --dio-dark-text: var(--dio-niebla);
  --dio-dark-text-muted: var(--dio-niebla-dark);
  --dio-dark-accent: var(--dio-amarillo);
  --dio-dark-link: var(--dio-verde-300);
  --dio-dark-border: var(--dio-petroleo-600);

  /* ── Tipografía ── */
  --dio-font-display: 'Sora', 'Sora Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dio-font-text: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible Next Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dio-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --dio-text-xs: 0.8125rem;
  --dio-text-sm: 0.9375rem;
  --dio-text-md: 1.0625rem;
  --dio-text-lg: 1.25rem;
  --dio-h4: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --dio-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --dio-h2: clamp(1.875rem, 1.5rem + 1.7vw, 2.75rem);
  --dio-h1: clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem);
  --dio-leading-tight: 1.12;
  --dio-leading-snug: 1.3;
  --dio-leading-body: 1.6;
  --dio-weight-display: 700;
  --dio-weight-display-heavy: 800;
  --dio-weight-text: 400;
  --dio-weight-text-strong: 600;
  --dio-tracking-display: -0.02em;
  --dio-tracking-caps: 0.06em;

  /* ── Espaciado ── */
  --dio-space-1: 0.25rem;
  --dio-space-2: 0.5rem;
  --dio-space-3: 0.75rem;
  --dio-space-4: 1rem;
  --dio-space-5: 1.5rem;
  --dio-space-6: 2rem;
  --dio-space-7: 3rem;
  --dio-space-8: 4rem;
  --dio-space-9: 6rem;
  --dio-space-10: 8rem;

  /* ── Forma y movimiento ── */
  --dio-radius-sm: 6px;
  --dio-radius-md: 10px;
  --dio-radius-lg: 14px;
  --dio-radius-xl: 22px;
  --dio-radius-pill: 999px;
  --dio-border-width: 1px;
  --dio-border-plate: 2px;
  --dio-shadow-sm: 0 1px 2px rgba(15, 61, 62, 0.08);
  --dio-shadow-md: 0 4px 14px rgba(15, 61, 62, 0.10);
  --dio-shadow-lg: 0 14px 40px rgba(15, 61, 62, 0.14);
  --dio-container: 72rem;
  --dio-container-text: 42rem;
  --dio-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dio-ease-screw: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dio-dur-fast: 120ms;
  --dio-dur: 200ms;
  --dio-dur-logo: 800ms;
}

/* Tema oscuro: solo tokens (el sitio sale en claro). Activar con data-theme="dark" en <html>. */
:root[data-theme="dark"] {
  --dio-bg: var(--dio-petroleo-900);
  --dio-surface: var(--dio-petroleo);
  --dio-surface-2: var(--dio-petroleo-700);
  --dio-text: var(--dio-niebla);
  --dio-text-muted: var(--dio-niebla-dark);
  --dio-accent: var(--dio-amarillo);
  --dio-on-accent: var(--dio-tinta);
  --dio-accent-hover: var(--dio-amarillo-300);
  --dio-accent-active: var(--dio-amarillo-500);
  --dio-focus: var(--dio-amarillo);
  --dio-link: var(--dio-verde-300);
  --dio-link-hover: var(--dio-niebla);
  --dio-signal: var(--dio-verde-300);
  --dio-highlight: var(--dio-amarillo);
  --dio-border: var(--dio-petroleo-600);
  --dio-border-input: var(--dio-petroleo-400);
  --dio-line: var(--dio-petroleo-400);
  --dio-ok: var(--dio-ok-dark); --dio-warning: var(--dio-warning-dark); --dio-error: var(--dio-error-dark); --dio-info: var(--dio-info-dark);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dio-dur-fast: 0ms; --dio-dur: 0ms; --dio-dur-logo: 0ms; }
}