/* Housemid — component stylesheet, loaded after tokens.css.
   Token values live in tokens.json (compiled to tokens.css, with the Archivo
   @font-face rules). This file keeps only what tokens cannot declare: which family
   each role uses (Owners Wide for titles, Owners Condensed for figures, Owners for
   text — Archivo widths as the web fallback), the [data-hm-theme="dark"]
   container scope, the composite control transition, reduced motion and the base
   element rules. */

/* Dark scope: drop [data-hm-theme="dark"] on any container and the light
   aliases flip to the Tinta / Grafito palette; the accent flips from Azul to Cielo.
   Every alias that reads the accent is restated here, because a custom property
   resolves where it is declared (:root), not where it is used. */
[data-hm-theme="dark"]{
  --surface-page:var(--hm-tinta);
  --surface-card:var(--hm-grafito);
  --surface-sunken:var(--hm-tinta-800);
  --surface-hover:var(--hm-tinta-600);
  --border-subtle:var(--hm-tinta-500);
  --border-strong:var(--hm-tinta-400);
  --text-strong:var(--hm-lino);
  --text-body:var(--text-shell-body);
  --text-muted:var(--text-shell-muted);
  --text-faint:var(--hm-tinta-300);
  --text-azul:var(--hm-cielo);
  --text-acento:var(--hm-cielo);
  --text-on-acento:var(--hm-tinta);
  --hm-acento-100:#1A2338;
  --hm-acento-300:var(--hm-azul-300);
  --hm-acento-400:var(--hm-azul-400);
  --hm-acento-500:var(--hm-cielo);
  --hm-acento-600:var(--hm-azul-600);
  --hm-acento-700:var(--hm-azul-300);
  --hm-acento-a12:rgba(142,174,240,.12);
  --hm-acento-a24:rgba(142,174,240,.24);
  --hm-acento-a40:rgba(142,174,240,.70);
  --hm-chart-1:var(--hm-cielo);
  --hm-chart-series:var(--hm-cielo);
  --action-primary-bg:var(--hm-cielo);
  --action-primary-bg-hover:var(--hm-azul-600);
  --action-primary-fg:var(--hm-tinta);
  --focus-ring:rgba(142,174,240,.70);
  --hm-chart-grid:var(--hm-tinta-500);
  --hm-chart-compare:#4A4F5B;
  --hm-success:#4ADE80;
  --hm-success-soft:rgba(74,222,128,.18);
  --hm-success-ink:#BBF7D0;
  --hm-danger:#FB7185;
  --hm-danger-soft:rgba(251,113,133,.18);
  --hm-danger-ink:#FECDD3;
  --hm-warning:#FB923C;
  --hm-warning-soft:rgba(251,146,60,.18);
  --hm-warning-ink:#FED7AA;
  --hm-info:#60A5FA;
  --hm-info-soft:rgba(96,165,250,.2);
  --hm-info-ink:#BFDBFE;
}

:root{
  --transition-control:background-color var(--dur-fast) var(--ease-flow),color var(--dur-fast) var(--ease-flow),border-color var(--dur-fast) var(--ease-flow),box-shadow var(--dur-fast) var(--ease-flow),transform var(--dur-fast) var(--ease-flow);
}
@media (prefers-reduced-motion:reduce){
  :root{
    --dur-fast:0ms;
    --dur-base:0ms;
    --dur-slow:0ms;
    --dur-flow:0ms;
  }
}

/* base */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6,p,figure{margin:0}
h1,h2{font-family:var(--font-display);letter-spacing:var(--tracking-tight)}
a{color:var(--text-azul);text-decoration:none;transition:color var(--dur-fast) var(--ease-flow)}
a:hover{color:var(--hm-acento-600);text-decoration:underline;text-underline-offset:3px}
[data-hm-theme="dark"] a{color:var(--hm-cielo)}
[data-hm-theme="dark"] a:hover{color:var(--hm-azul-400)}
button{font-family:inherit}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}

/* Brand roles */
.hm-eyebrow{font-family:var(--font-display);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.hm-numeric{font-family:var(--font-condensed);font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-metric)}
.hm-display{font-family:var(--font-display);letter-spacing:var(--tracking-tight)}