/* =============================================================
   Asesor Mercedes-Benz — tokens de diseño
   Concepto: "showroom nocturno". Negro de sala, metal plateado
   como texto, y un ámbar champán tomado de la luz ambiental
   interior del Clase S como único acento.
   Marca blanca: el panel puede sobrescribir --acento y --primario
   en runtime (chat.js lee color_primario / color_acento).
   ============================================================= */

:root {
  /* --- superficie (tema oscuro, por defecto) --- */
  --negro: #000000;
  --grafito: #101315;
  --grafito-alto: #191d21;
  --grafito-suave: #15191c;

  /* --- tinta --- */
  --plata: #dce0e4;
  --plata-media: #9aa2aa;
  --plata-tenue: #7b838b;

  /* --- líneas y metal --- */
  --linea: rgba(220, 224, 228, 0.13);
  --linea-fuerte: rgba(220, 224, 228, 0.26);
  --cromo: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.08) 45%, rgba(255,255,255,.3));

  /* --- acentos --- */
  --acento: #d8a24a;          /* ámbar champán: luz ambiental del habitáculo */
  --acento-tenue: rgba(216, 162, 74, 0.16);
  --primario: #dce0e4;        /* plata de la estrella */
  --verde: #86b79c;           /* verificado */
  --verde-tenue: rgba(134, 183, 156, 0.14);
  --alerta: #dc8d7f;
  --alerta-tenue: rgba(220, 141, 127, 0.14);

  /* --- vidrio --- */
  --vidrio: rgba(16, 19, 21, 0.72);
  --vidrio-borde: rgba(220, 224, 228, 0.1);

  /* --- tipografía --- */
  --display: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --texto: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --t-display: clamp(2.6rem, 11vw, 4.4rem);
  --t-titulo: clamp(1.28rem, 4.4vw, 1.8rem);
  --t-base: 1rem;
  --t-chico: 0.875rem;
  --t-micro: 0.78rem;

  /* --- ritmo --- */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;

  /* --- forma --- */
  --r-pill: 999px;
  --r-burbuja: 18px 18px 4px 18px;
  --r-sutil: 4px;
  --r-hoja: 22px 22px 0 0;

  /* --- profundidad (una sola sombra, apenas perceptible) --- */
  --sombra: 0 24px 60px -24px rgba(0, 0, 0, 0.85);

  --ancho-max: 1440px;
  --columna: 44rem;

  color-scheme: dark;
}

/* Tema claro: sala de exposición de día, aluminio frío, bronce como acento. */
:root[data-theme="claro"] {
  --negro: #e4e6e7;
  --grafito: #f4f5f6;
  --grafito-alto: #ffffff;
  --grafito-suave: #eceeef;

  --plata: #12161a;
  --plata-media: #545d65;
  --plata-tenue: #5f686f;

  --linea: rgba(18, 22, 26, 0.12);
  --linea-fuerte: rgba(18, 22, 26, 0.24);
  --cromo: linear-gradient(180deg, rgba(18,22,26,.35), rgba(18,22,26,.06) 45%, rgba(18,22,26,.22));

  --acento: #8a6420;
  --acento-tenue: rgba(138, 100, 32, 0.12);
  --primario: #12161a;
  --verde: #2f6b4f;
  --verde-tenue: rgba(47, 107, 79, 0.12);
  --alerta: #a2432f;
  --alerta-tenue: rgba(162, 67, 47, 0.1);

  --vidrio: rgba(244, 245, 246, 0.82);
  --vidrio-borde: rgba(18, 22, 26, 0.1);
  --sombra: 0 24px 60px -30px rgba(18, 22, 26, 0.4);

  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="oscuro"]) {
    --negro: #e4e6e7;
    --grafito: #f4f5f6;
    --grafito-alto: #ffffff;
    --grafito-suave: #eceeef;
    --plata: #12161a;
    --plata-media: #545d65;
    --plata-tenue: #5f686f;
    --linea: rgba(18, 22, 26, 0.12);
    --linea-fuerte: rgba(18, 22, 26, 0.24);
    --cromo: linear-gradient(180deg, rgba(18,22,26,.35), rgba(18,22,26,.06) 45%, rgba(18,22,26,.22));
    --acento: #8a6420;
    --acento-tenue: rgba(138, 100, 32, 0.12);
    --primario: #12161a;
    --verde: #2f6b4f;
    --verde-tenue: rgba(47, 107, 79, 0.12);
    --alerta: #a2432f;
    --alerta-tenue: rgba(162, 67, 47, 0.1);
    --vidrio: rgba(244, 245, 246, 0.82);
    --vidrio-borde: rgba(18, 22, 26, 0.1);
    --sombra: 0 24px 60px -30px rgba(18, 22, 26, 0.4);
    color-scheme: light;
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--negro);
  color: var(--plata);
  font-family: var(--texto);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

a { color: inherit; }

:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: var(--r-sutil);
}

::selection { background: var(--acento-tenue); color: var(--plata); }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}