/* ==========================================================================
   Variables de color, espaciado y tipografía. El modo oscuro redefine los mismos tokens.
   ========================================================================== */

:root {
  --bg: #FFFFFF;
  --surface: #EEF5F6;
  --ink: #000000;
  --muted: #44585C;
  --teal: #019EB5;
  --teal-ink: #006A7A;
  --on-teal: #000000;
  --line: rgba(0,0,0,.14);
  --frame-dark: #000000;
  --pad: clamp(20px,5vw,64px);
  --max: 1320px;
  --header-h: 72px;
  --font: "Archivo","Helvetica Neue",Arial,sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --bg: #03191E;
    --surface: #082A31;
    --ink: #EAF4F5;
    --muted: #A3BBBF;
    --teal: #13B3CA;
    --teal-ink: #5CD3E4;
    --line: rgba(234,244,245,.16);
    --frame-dark: #000000;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #03191E;
  --surface: #082A31;
  --ink: #EAF4F5;
  --muted: #A3BBBF;
  --teal: #13B3CA;
  --teal-ink: #5CD3E4;
  --line: rgba(234,244,245,.16);
  --frame-dark: #000000;
  color-scheme: dark;
}

/* Celeste compartido por las secciones de color (servicios, formatos y contacto) */
:root {
  --sect: var(--teal);
}