/* ==========================================================================
   InnovaTime Colombia · Design tokens
   Tema oscuro = tema principal. Tema claro = alternativo.
   Prioridad: data-theme (interruptor) > prefers-color-scheme > oscuro por defecto.
   Contrastes verificados con WCAG 2.2 (ver docs/DISENO.md).
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-var.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Marca (no cambian con el tema) ---- */
  --brand-violet: #512BD4;          /* violeta .NET */
  --brand-violet-600: #4320B8;
  --brand-violet-400: #6A45E8;
  --brand-violet-300: #A48BFA;
  --brand-cyan: #22D3EE;
  --brand-cyan-700: #0E7490;

  /* ---- Tipografía ---- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  /* Escala fluida (mobile-first, razón ~1.25) */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.375rem);
  --step-2: clamp(1.44rem, 1.3rem + 0.7vw, 1.8rem);
  --step-3: clamp(1.73rem, 1.5rem + 1.15vw, 2.4rem);
  --step-4: clamp(2.07rem, 1.7rem + 1.9vw, 3.25rem);
  --step-5: clamp(2.49rem, 1.9rem + 2.9vw, 4.25rem);

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.65;

  /* ---- Espaciado ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --space-3xl: clamp(4.5rem, 3rem + 6vw, 8.5rem);

  /* ---- Forma y layout ---- */
  --radius-s: 0.5rem;
  --radius-m: 0.875rem;
  --radius-l: 1.25rem;
  --radius-pill: 999px;
  --container: 74rem;
  --container-narrow: 46rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --header-h: 4.25rem;

  /* ---- Movimiento ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-reveal: 700ms;

  /* ---- Tema OSCURO (principal) ---- */
  color-scheme: dark;
  --color-bg: #0F131A;              /* grafito azul noche, no negro puro */
  --color-bg-elevated: #121721;
  --color-surface: #161B24;
  --color-surface-2: #1D2431;
  --color-surface-3: #252D3C;
  --color-border: #2A3242;          /* decorativo */
  --color-border-strong: #5C6780;   /* controles de formulario: 3.3:1 sobre surface */
  --color-text: #E8ECF4;            /* 15.7:1 sobre bg */
  --color-text-muted: #A2ACBE;      /* 8.1:1 sobre bg */
  --color-heading: #F5F7FB;
  --color-accent: var(--brand-violet);          /* rellenos (botones) con texto blanco: 7.9:1 */
  --color-accent-hover: var(--brand-violet-400);/* 5.8:1 con texto blanco */
  --color-accent-text: #A48BFA;     /* violeta para texto/enlaces: 6.8:1 sobre bg */
  --color-accent-2: var(--brand-cyan);          /* 10.3:1 sobre bg */
  --color-on-accent: #FFFFFF;
  --color-accent-soft: rgb(81 43 212 / 0.18);
  --color-accent-2-soft: rgb(34 211 238 / 0.12);
  --color-focus: #22D3EE;
  --color-success: #4ADE80;
  --color-danger: #F87171;
  --shadow-card: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 10px 30px -12px rgb(0 0 0 / 0.6);
  --shadow-hover: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 18px 40px -14px rgb(81 43 212 / 0.45);
  --glow: radial-gradient(60% 60% at 50% 0%, rgb(81 43 212 / 0.28), transparent 70%);
  --grid-line: rgb(255 255 255 / 0.035);
  --code-bg: #0B0E14;
  --code-keyword: #C4B5FD;
  --code-type: #67E8F9;
  --code-string: #FCD34D;
  --code-comment: #7D8799;          /* 5.0:1 sobre code-bg */
  --code-method: #F0ABFC;
}

/* Tema CLARO: por preferencia del sistema (si el usuario no eligió) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --color-bg: #F6F7FA;
    --color-bg-elevated: #FFFFFF;
    --color-surface: #FFFFFF;
    --color-surface-2: #EEF0F5;
    --color-surface-3: #E3E7EF;
    --color-border: #DCE0E8;
    --color-border-strong: #7F889B;   /* 3.6:1 sobre blanco */
    --color-text: #141821;            /* 16.6:1 */
    --color-text-muted: #4A5263;      /* 7.3:1 */
    --color-heading: #0B0E14;
    --color-accent: var(--brand-violet);
    --color-accent-hover: var(--brand-violet-600);
    --color-accent-text: #512BD4;     /* 7.4:1 sobre bg */
    --color-accent-2: var(--brand-cyan-700); /* 5.0:1 */
    --color-accent-soft: rgb(81 43 212 / 0.08);
    --color-accent-2-soft: rgb(14 116 144 / 0.08);
    --color-focus: #512BD4;
    --color-success: #15803D;
    --color-danger: #B91C1C;
    --shadow-card: 0 1px 2px rgb(16 24 40 / 0.05), 0 8px 24px -12px rgb(16 24 40 / 0.12);
    --shadow-hover: 0 2px 4px rgb(16 24 40 / 0.06), 0 18px 36px -14px rgb(81 43 212 / 0.28);
    --glow: radial-gradient(60% 60% at 50% 0%, rgb(81 43 212 / 0.12), transparent 70%);
    --grid-line: rgb(15 19 26 / 0.05);
  }
}

/* Tema CLARO: elegido con el interruptor */
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #F6F7FA;
  --color-bg-elevated: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-2: #EEF0F5;
  --color-surface-3: #E3E7EF;
  --color-border: #DCE0E8;
  --color-border-strong: #7F889B;
  --color-text: #141821;
  --color-text-muted: #4A5263;
  --color-heading: #0B0E14;
  --color-accent: var(--brand-violet);
  --color-accent-hover: var(--brand-violet-600);
  --color-accent-text: #512BD4;
  --color-accent-2: var(--brand-cyan-700);
  --color-accent-soft: rgb(81 43 212 / 0.08);
  --color-accent-2-soft: rgb(14 116 144 / 0.08);
  --color-focus: #512BD4;
  --color-success: #15803D;
  --color-danger: #B91C1C;
  --shadow-card: 0 1px 2px rgb(16 24 40 / 0.05), 0 8px 24px -12px rgb(16 24 40 / 0.12);
  --shadow-hover: 0 2px 4px rgb(16 24 40 / 0.06), 0 18px 36px -14px rgb(81 43 212 / 0.28);
  --glow: radial-gradient(60% 60% at 50% 0%, rgb(81 43 212 / 0.12), transparent 70%);
  --grid-line: rgb(15 19 26 / 0.05);
}

/* El bloque de código del hero conserva su estética oscura en ambos temas. */