/* ==========================================================================
   APROC · Sistema de diseño "Vía"
   --------------------------------------------------------------------------
   Concepto: el sistema se lee como la señalización de una carretera.
   - Superficies de concreto claro (modo claro) o asfalto (modo oscuro).
   - Tipografía Overpass: derivada de Highway Gothic, la letra de los
     letreros viales. Overpass Mono para placas, montos y kilómetros.
   - El dorado del logo se usa como la línea del carril: poco y con intención.
   - Rojo, ámbar y verde son señales, no decoración.
   ========================================================================== */

:root {
  --font: 'Overpass', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'Overpass Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* Concreto (claro) */
  --bg: #E6E7E3;
  --surface: #F8F8F6;
  --surface-2: #EFF0EC;
  --surface-3: #E2E3DE;
  --ink: #131416;
  --ink-2: #3B3E42;
  --mute: #63666B;
  --line: #D2D4CF;
  --line-2: #BCBFB9;

  /* Marca */
  --gold: #E6C34A;
  --gold-ink: #7E6100;
  --gold-soft: #F5E6A8;
  --on-gold: #17140A;

  /* Señales */
  --ok: #1D7A45;      --ok-soft: #DCEEE2;
  --warn: #A9580C;    --warn-soft: #F5E5D2;
  --crit: #B92D25;    --crit-soft: #F5DDDA;
  --info: #2A579C;    --info-soft: #DCE5F3;

  /* Asfalto: barra lateral y escenarios, igual en ambos modos */
  --asphalt: #101113;
  --asphalt-2: #18191C;
  --asphalt-3: #212327;
  --asphalt-line: #2B2D32;
  --asphalt-ink: #E9EAE6;
  --asphalt-mute: #8E9197;

  --shadow: 0 1px 0 rgba(17, 18, 20, .03), 0 14px 34px -20px rgba(17, 18, 20, .30);
  --overlay: 0 40px 90px -24px rgba(8, 8, 10, .50);
  --scrim: rgba(16, 17, 19, .42);

  --r-s: 6px;
  --r: 10px;
  --r-l: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --spring: cubic-bezier(.3, 1.4, .4, 1);
  --side-w: 248px;

  color-scheme: light;
}

/* Asfalto (oscuro) según el sistema, salvo que el usuario elija claro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C0D0F;
    --surface: #141518;
    --surface-2: #1A1C1F;
    --surface-3: #222428;
    --ink: #ECEDE9;
    --ink-2: #C2C4C0;
    --mute: #959899;
    --line: #26292D;
    --line-2: #363940;
    --gold-ink: #E6C34A;
    --gold-soft: #3A3115;
    --ok: #52C485;   --ok-soft: #142D1E;
    --warn: #F0A050; --warn-soft: #362613;
    --crit: #F06B60; --crit-soft: #3A1916;
    --info: #86AAEA; --info-soft: #18243B;
    --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 18px 40px -22px rgba(0, 0, 0, .8);
    --scrim: rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0C0D0F;
  --surface: #141518;
  --surface-2: #1A1C1F;
  --surface-3: #222428;
  --ink: #ECEDE9;
  --ink-2: #C2C4C0;
  --mute: #959899;
  --line: #26292D;
  --line-2: #363940;
  --gold-ink: #E6C34A;
  --gold-soft: #3A3115;
  --ok: #52C485;   --ok-soft: #142D1E;
  --warn: #F0A050; --warn-soft: #362613;
  --crit: #F06B60; --crit-soft: #3A1916;
  --info: #86AAEA; --info-soft: #18243B;
  --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 18px 40px -22px rgba(0, 0, 0, .8);
  --scrim: rgba(0, 0, 0, .55);
  color-scheme: dark;
}