/* DLV+design · tokens
   Slots A1/A2/B del paquete de design system + extensiones --dlv-*.
   Es el único archivo con hex crudos. font-size en rem, layout en rem. */
:root {
  color-scheme: light;

  /* Paleta de marca */
  --dlv-ink: #263238;
  --dlv-slate: #37474F;
  --dlv-steel: #546E7A;
  --dlv-fog: #78909C;
  --dlv-mist: #CFD8DC;
  --dlv-canvas: #F5F5F5;
  --dlv-paper: #FFFFFF;
  --dlv-offwhite: #F1F1F1;
  --dlv-chrome: #222222;
  --dlv-footer: #121212;
  --dlv-black: #000000;
  --dlv-space: #0099FF;
  --dlv-graphite: #333333;
  --dlv-graphite-2: #444444;
  --dlv-teal: #32B8B8;
  --dlv-teal-bright: #5AEBEB;
  --dlv-teal-fill: rgba(0, 221, 221, 0.8);
  --dlv-cyan: #00FFFF;
  --dlv-glow: rgba(0, 255, 255, 0.4);
  --dlv-raise: rgba(51, 51, 51, 0.6);
  --dlv-grad-a: #E90262;
  --dlv-grad-b: #DB62FE;
  --dlv-gradient: linear-gradient(45deg, var(--dlv-grad-a), var(--dlv-grad-b));
  --dlv-oceanic-bg: #88D8D0;
  --dlv-oceanic-fg: #562B5C;
  --dlv-lavender-bg: #985FE0;
  --dlv-lavender-fg: #2D2430;

  /* A1 · superficies y texto */
  --bg: var(--dlv-canvas);
  --surface: var(--dlv-paper);
  --surface-warm: color-mix(in srgb, var(--dlv-mist) 45%, var(--dlv-canvas));
  --fg: var(--dlv-ink);
  --fg-2: var(--dlv-slate);
  --muted: var(--dlv-steel);
  --meta: var(--dlv-steel);
  --border: var(--dlv-mist);
  --border-soft: color-mix(in srgb, var(--dlv-mist) 55%, var(--dlv-canvas));

  /* A2 · acento. Sobre teal el texto va en tinta, nunca en blanco. */
  --accent: var(--dlv-teal);
  --accent-on: var(--dlv-ink);
  --accent-hover: color-mix(in srgb, var(--dlv-teal) 88%, transparent);
  --accent-active: color-mix(in srgb, var(--dlv-teal) 70%, var(--dlv-ink));
  --accent-text: color-mix(in srgb, var(--dlv-teal) 42%, var(--dlv-ink));
  --success: #2E9E6B;
  --warn: #F2B705;
  --danger: #E53935;
  --danger-text: color-mix(in srgb, var(--danger) 72%, var(--dlv-ink));
  --success-text: color-mix(in srgb, var(--success) 62%, var(--dlv-ink));

  /* B · tipografía */
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body: 'Open Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --text-xs: 1rem;
  --text-sm: 1rem;
  --text-base: 1rem;
  --text-lg: 1.2rem;
  --text-xl: 1.3rem;
  --text-2xl: 1.8rem;
  --text-3xl: 2.2rem;
  --text-4xl: 3.6rem;
  --leading-body: 1.9;
  --leading-tight: 1.3;
  --leading-display: 1.6;
  --tracking-display: 0;
  --tracking-ticker: 0.5rem;

  /* Espaciado: base de 4 px */
  --space-1: 0.3rem;
  --space-2: 0.5rem;
  --space-3: 0.8rem;
  --space-4: 1rem;
  --space-5: 1.3rem;
  --space-6: 1.5rem;
  --space-7: 1.8rem;
  --space-8: 2rem;
  --space-9: 2.3rem;
  --space-10: 2.5rem;
  --space-11: 2.8rem;
  --space-12: 3rem;
  --section-y-sm: 2rem;
  --section-y-md: 3rem;
  --section-y-lg: 4.5rem;

  /* Forma y profundidad */
  --radius-sm: 0.2rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.8rem;
  --radius-pill: 624.9rem;
  --elev-flat: none;
  --elev-ring: 0 0 0 0.1rem var(--border);
  --elev-raised: 0 0.3rem 0.8rem var(--dlv-raise);
  --dlv-header-glow: 0 0 1rem var(--dlv-glow);
  --focus-ring: 0.1rem solid var(--fg);

  /* Movimiento */
  --motion-fast: 150ms;
  --motion-base: 300ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Contenedor */
  --container-max: 75rem;
  --container-gutter-lg: 2rem;
  --container-gutter-md: 1.5rem;
  --container-gutter-sm: 1rem;
  --header-h: 5rem;

  /* Roles de componente que cambian con el tema */
  --link-hover: var(--accent-text);
  --borde-control: color-mix(in srgb, var(--dlv-teal) 79%, var(--dlv-ink));
  --titlebar-bg: var(--dlv-teal);
  --titlebar-fg: var(--dlv-ink);
  --titlebar-rule: transparent;
  --card-bg: var(--surface);
  --card-ring: 0 0 0 0.1rem var(--border);
  --card-rule: transparent;
  --code-bg: var(--dlv-chrome);
  --code-fg: var(--dlv-offwhite);
  --code-rule: var(--dlv-teal);
  --hueco-fg: var(--dlv-steel);
  --dot-on: var(--dlv-ink);
  --dot-hover: var(--dlv-ink);
}

/* Tema oscuro */
[data-theme='dark'] {
  color-scheme: dark;
  --bg: var(--dlv-chrome);
  --surface: var(--dlv-chrome);
  --surface-warm: color-mix(in srgb, var(--dlv-ink) 60%, var(--dlv-chrome));
  --fg: var(--dlv-offwhite);
  --fg-2: var(--dlv-mist);
  --muted: var(--dlv-mist);
  --meta: var(--dlv-mist);
  --border: color-mix(in srgb, var(--dlv-mist) 28%, var(--dlv-chrome));
  --border-soft: color-mix(in srgb, var(--dlv-mist) 14%, var(--dlv-chrome));
  --accent-text: var(--dlv-teal-bright);
  --danger-text: color-mix(in srgb, var(--danger) 45%, var(--dlv-offwhite));
  --success-text: color-mix(in srgb, var(--success) 55%, var(--dlv-offwhite));
  --link-hover: var(--dlv-cyan);
  --borde-control: var(--dlv-teal);
  --titlebar-bg: var(--dlv-black);
  --titlebar-fg: var(--dlv-offwhite);
  --titlebar-rule: var(--dlv-teal);
  --card-ring: none;
  --card-rule: var(--dlv-teal);
  --code-bg: var(--dlv-footer);
  --focus-ring: 0.1rem solid var(--dlv-cyan);
  --hueco-fg: var(--dlv-mist);
  --dot-on: var(--dlv-offwhite);
  --dot-hover: var(--dlv-teal-bright);
}

/* Banda .invert: da vuelta la paleta adentro de la página */
.invert {
  --bg: var(--dlv-ink);
  --surface: color-mix(in srgb, var(--dlv-ink) 82%, var(--dlv-black));
  --surface-warm: color-mix(in srgb, var(--dlv-ink) 82%, var(--dlv-black));
  --fg: var(--dlv-offwhite);
  --fg-2: var(--dlv-mist);
  --muted: var(--dlv-mist);
  --meta: var(--dlv-mist);
  --border: color-mix(in srgb, var(--dlv-mist) 35%, var(--dlv-ink));
  --border-soft: color-mix(in srgb, var(--dlv-mist) 20%, var(--dlv-ink));
  --accent-text: var(--dlv-teal-bright);
  --link-hover: var(--dlv-cyan);
  --borde-control: var(--dlv-teal);
  --titlebar-bg: var(--dlv-black);
  --titlebar-fg: var(--dlv-offwhite);
  --titlebar-rule: var(--dlv-teal);
  --card-bg: color-mix(in srgb, var(--dlv-ink) 82%, var(--dlv-black));
  --card-ring: 0 0 0 0.1rem var(--border);
  --focus-ring: 0.1rem solid var(--dlv-cyan);
  --hueco-fg: var(--dlv-mist);
  --dot-on: var(--dlv-offwhite);
  --dot-hover: var(--dlv-teal-bright);
  color-scheme: dark;
  background: var(--bg);
  color: var(--fg);
}
[data-theme='dark'] .invert {
  --bg: var(--dlv-mist);
  --surface: var(--dlv-offwhite);
  --surface-warm: var(--dlv-offwhite);
  --fg: var(--dlv-ink);
  --fg-2: var(--dlv-slate);
  --muted: var(--dlv-slate);
  --meta: var(--dlv-slate);
  --border: var(--dlv-steel);
  --border-soft: var(--dlv-fog);
  --accent-text: color-mix(in srgb, var(--dlv-teal) 30%, var(--dlv-ink));
  --link-hover: color-mix(in srgb, var(--dlv-teal) 30%, var(--dlv-ink));
  --borde-control: color-mix(in srgb, var(--dlv-teal) 79%, var(--dlv-ink));
  --titlebar-bg: var(--dlv-teal);
  --titlebar-fg: var(--dlv-ink);
  --titlebar-rule: transparent;
  --card-bg: var(--dlv-offwhite);
  --focus-ring: 0.1rem solid var(--dlv-ink);
  --hueco-fg: var(--dlv-slate);
  --dot-on: var(--dlv-ink);
  --dot-hover: var(--dlv-ink);
  color-scheme: light;
}