/* ==========================================================================
   MotosCR V2 — tokens del design system (compartidos por sitio público y Admin)
   Fuente: docs/design/MotosCR — Interactive Web Prototype V1.html (congelado).
   El tema claro/oscuro es preferencia del cliente: data-theme en <html>
   (localStorage) o, sin preferencia, prefers-color-scheme.
   ========================================================================== */
:root{
  /* --- superficies que cambian con el tema --- */
  --surface-page:#ffffff;
  --surface-raised:#f7f7f5;
  --card:#ffffff;
  --input-bg:#ffffff;
  --header-bg:rgba(255,255,255,.86);
  --surface-veil:var(--header-bg);
  --surface-accent-soft:#fbe9ec;

  /* --- superficies OSCURAS PERMANENTES: no se invierten nunca.
         Hero, campaña, footer y utility bar son carbón en los dos temas. --- */
  --surface-inverse:#0b0b0d;
  --ink-inverse:#f5f5f2;
  --line-inverse:#2c2c31;

  /* --- escenario de producto: claro en ambos temas para que la moto destaque --- */
  --media-stage:#eeeeea;
  --surface-stage:#eeeeea;

  /* --- texto --- */
  --ink-primary:#0e0e10;
  --ink-secondary:#3a3a40;
  --ink-muted:#63636a;
  --ink-on-accent:#ffffff;

  --accent:#c8102e;
  --accent-strong:#a30c24;
  --line-hairline:#e6e6e1;
  --line-control:#8e8e89;
  --state-positive:#0f7a3d;
  --state-attention:#8a5a00;
  --state-critical:#a3121f;
  --focus-ring:var(--accent);

  --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;

  --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-xl:24px; --radius-full:999px;

  --elev-1:0 1px 2px rgba(14,14,16,.05);
  --elev-2:0 12px 32px rgba(14,14,16,.08);
  --elev-3:0 28px 64px rgba(14,14,16,.14);

  --container:1320px;
  --gutter:60px;
  --header-h:72px;

  --dur-control:160ms;
  --dur-content:240ms;
  --dur-media:460ms;
  --ease-out:cubic-bezier(.2,0,0,1);

  --font-display:Archivo,"Helvetica Neue",Arial,sans-serif;
  --font-text:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* Las superficies permanentes (inverse, media-stage) NO se redefinen acá:
   el hero y el footer siguen siendo carbón y el escenario de producto sigue
   siendo claro, que es lo que hace que la moto se lea en los dos temas. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --surface-page:#0d0d0f;
    --surface-raised:#15151a;
    --card:#141419;
    --input-bg:#141419;
    --header-bg:rgba(13,13,15,.88);
    --surface-accent-soft:#2b1216;
    --ink-primary:#f3f3f0;
    --ink-secondary:#c6c6c1;
    --ink-muted:#9b9b96;
    --accent:#ff3a40;
    --accent-strong:#ff5a60;
    /* Blanco sobre el rojo claro del tema oscuro da 3.5:1 y no pasa AA.
       El texto dentro de una superficie accent pasa a ser casi negro. */
    --ink-on-accent:#15090b;
    --line-hairline:#26262c;
    --line-control:#6d6d76;
    --state-positive:#37c26e;
    --state-attention:#e2a53a;
    --state-critical:#ff7a80;
  }
}
:root[data-theme="dark"]{
    --surface-page:#0d0d0f;
    --surface-raised:#15151a;
    --card:#141419;
    --input-bg:#141419;
    --header-bg:rgba(13,13,15,.88);
    --surface-accent-soft:#2b1216;
    --ink-primary:#f3f3f0;
    --ink-secondary:#c6c6c1;
    --ink-muted:#9b9b96;
    --accent:#ff3a40;
    --accent-strong:#ff5a60;
    /* Blanco sobre el rojo claro del tema oscuro da 3.5:1 y no pasa AA.
       El texto dentro de una superficie accent pasa a ser casi negro. */
    --ink-on-accent:#15090b;
    --line-hairline:#26262c;
    --line-control:#6d6d76;
    --state-positive:#37c26e;
    --state-attention:#e2a53a;
    --state-critical:#ff7a80;
}

/* Los buscadores traen su propio botón para borrar (la X gris del diseño): se oculta la X nativa de
   Chrome/Edge/Safari, que aparecía al lado en azul. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}