/* Shared theme layer for lasaladita.com (2026-10-30).
   Loaded after each page's own <style> blocks, so these rules win at equal
   specificity. Pages keep their own layout; this file owns: label contrast,
   body weight, prose links, focus ring, skip link, dark mode and chart tokens. */
:root{
  --accent:#6e5a3c;           /* eyebrow and label text: 5.2:1 or better on every page background */
  --mid:#655a4a;              /* secondary text: 5.4:1 on --bone, 6.4:1 on --cream */
  --brass-text:#76602f;       /* brass used as text (borders keep --brass) */
  --link:var(--rain,#2a5278);
  --focus:#2a5278;
  /* chart tokens: three categorical slots, validated with the dataviz palette validator
     (--pairs all) against --cream, --paper and --bone in light and dark; all checks PASS. */
  --series-1:#2a78d6; --series-2:#cc5520; --series-3:#138a63;
  --series-muted:#8d877c; --chart-grid:rgba(27,22,16,.10); --chart-axis:#5f5545;
  --chart-band:rgba(42,120,214,.13); --chart-tip-bg:#1b1610; --chart-tip-fg:#f7f3ea;
  color-scheme:light dark;
}
/* chart boxes reserve their rendered height before /static/charts.js runs (no layout shift) */
.lsc-plot{min-height:var(--h-m,260px)}
@media (min-width:566px){.lsc-plot{min-height:var(--h-d,300px)}}
body{font-weight:400}
.lead,.hero-sub,.hero-dek,.intro p,.dek{font-weight:400}

/* One prose-link style: links inside running text, not buttons, cards or nav. */
main :is(p,li,td,dd,figcaption,blockquote) a:not([class]),
.wrap :is(p,li,td,dd,figcaption,blockquote) a:not([class]){
  color:var(--link);text-decoration:underline;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:3px}
main :is(p,li,td,dd,figcaption,blockquote) a:not([class]):hover,
.wrap :is(p,li,td,dd,figcaption,blockquote) a:not([class]):hover{text-decoration-color:currentColor}

/* Keyboard */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
.skip-link{position:absolute;left:8px;top:-80px;z-index:1000;background:var(--ink);color:var(--cream);
  padding:.7rem 1rem;font:500 15px/1 var(--sans,'Jost',sans-serif);letter-spacing:0;text-transform:none;text-decoration:none;border-radius:2px}
.skip-link:focus{top:8px}
[role="region"][tabindex="0"]:focus-visible{outline-offset:-2px}
footer a{display:inline-block;padding:12px 4px}

@media (prefers-color-scheme: dark){
  :root{
    --cream:#14120f;--warm:#1a1713;--paper:#1c1914;--bone:#26211a;
    --ink:#ece6da;--soft:#d9d1c2;--mid:#b3a892;--accent:#c9a86a;--brass:#c9a86a;--brass-text:#d2b47a;
    --rust:#e08a66;--sage:#9fb38f;--storm:#9db1d6;--ocean:#7fb3c8;
    --rain:#8db4d8;--rain-light:#1b2632;--rain-pale:#171d24;
    --ocean-light:#1b2632;--ocean-pale:#171d24;--storm-light:#1e2330;--storm-pale:#191d26;
    --heat-light:#2a1d17;--heat-pale:#221813;--terra-light:#2a1d19;--seismic-light:#211e2b;--seismic-pale:#1b1923;--forest-light:#1a241c;
    --line:rgba(236,230,218,.09);--line-strong:rgba(236,230,218,.18);
    --link:#8db4d8;--focus:#8db4d8;
    --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70;
    --series-muted:#8f897e; --chart-grid:rgba(236,230,218,.12); --chart-axis:#b8ad97;
    --chart-band:rgba(57,135,229,.20); --chart-tip-bg:#ece6da; --chart-tip-fg:#14120f;
  }
  nav#nav,nav{background:rgba(20,18,15,.96)!important;color:var(--ink)!important}
  nav#nav .nav-logo{color:var(--ink)!important}
  .nav-dropdown{background:rgba(28,25,20,.98)!important}
  nav.menu-open,nav.menu-open .nav-right{background:var(--cream)!important}
}
.nav-arrow{font-size:11px}
code{overflow-wrap:anywhere}

/* Metric-matched fallbacks: text keeps its size while the web fonts load (CLS). Tuned 2026-10-30 against the forecast hero at 390/412/1440. */
@font-face{font-family:'CG Fallback';src:local('Georgia');size-adjust:80%;ascent-override:95%;descent-override:30%;line-gap-override:0%}
@font-face{font-family:'CG Fallback';font-style:italic;src:local('Georgia Italic');size-adjust:80%;ascent-override:95%;descent-override:30%;line-gap-override:0%}
@font-face{font-family:'Jost Fallback';src:local('Arial');size-adjust:96%}
@font-face{font-family:'Tenor Fallback';src:local('Georgia');size-adjust:108%}
:root{--serif:'Cormorant Garamond','CG Fallback',Georgia,serif;--sans:'Jost','Jost Fallback',sans-serif;--display:'Tenor Sans','Tenor Fallback',Georgia,serif}

/* Inline SVG charts: on phones keep labels readable (>= 10px) and scroll sideways instead of shrinking. */
@media (max-width:700px){
  .chart-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .chart-scroll>svg{min-width:var(--cmw,680px);width:var(--cmw,680px);height:auto}
}