/* Shared type scale. Compact labels and notes are for dense Composer metadata;
   reading copy and controls use the larger body, small, caption and control roles. */
:root {
  --font-weight-product:760;
  --font-weight-metric:720;
  --font-micro:8px;
  --font-label:9px;
  --font-eyebrow:10px;
  --font-note:11px;
  --font-compact:12px;
  --font-body:16px;
  --font-small:14px;
  --font-caption:13px;
  --font-button:16px;
  --font-control:14px;
  --font-lead:18px;
  --font-heading:20px;
  --font-title:24px;
  --font-title-large:28px;
  --font-display:clamp(34px,3.3vw,53px);
  --font-display-compact:39px;
  --font-brand-name:1.375em;
}
@media(max-width:1150px){:root{--font-display:35px;--font-display-compact:var(--font-display)}}
@media(max-width:720px){:root{--font-display:34px}}

/* Shared text colors used by About's five-color labels and the Home hero. 
   Yellow uses its readable text variant, not the bright decorative yellow. */
:root{
  --rainbow-text-blue:#477ff3;
  --rainbow-text-red:#ea5865;
  --rainbow-text-yellow:#aa8000;
  --rainbow-text-green:#45a474;
  --rainbow-text-purple:#8966cb;
}
:root[data-theme="dark"]{--rainbow-text-yellow:#e5c366}


/* Shared neutral palette. The html:root selectors intentionally outrank the
   legacy page-local token defaults while retaining each page's surface depth.
   Category, warning, danger and success colors are not neutral colors. */
html:root {
  --bg:#edf2f3; --bg-elevated:rgba(252,254,255,.82);
  --card:#fcfeff; --panel:rgba(246,249,250,.88); --panel-solid:#fcfeff;
  --surface:#f6f9fa; --surface-soft:rgba(246,249,250,.55);
  --surface-hover:#fff; --surface-active:#eef4f6;
  --ink:#202628; --muted:#666f71; --quiet:#7c8789;
  --line:#d2dbdd; --line-strong:#bfcdd1;
  --text-secondary:#5b6265; --tint:rgba(22,27,29,.045);
  --bar-bg:rgba(22,27,29,.09); --header-bg:rgba(237,242,243,.87);
  --primary-bg:#20282b; --on-primary:#fff;
  --accent:#4d626b; --accent-soft:#dfe9ed; --all:#232728;
  --shadow:0 24px 64px rgba(24,35,40,.045);
  --focus-glow:rgba(86,128,149,.10);
  --graph-grid:rgba(22,27,29,.035); --graph-shine:rgba(255,255,255,.7);
  --graph-low:rgba(247,251,252,.15);
}
html:root[data-theme="dark"] {
  --bg:#1b1f20; --bg-elevated:rgba(30,36,39,.9);
  --card:#2a3032; --panel:rgba(35,40,42,.95); --panel-solid:#2a3032;
  --surface:#23282a; --surface-soft:rgba(35,43,46,.45);
  --surface-hover:#303b3e; --surface-active:#2b363a;
  --ink:#e8eff1; --muted:#abb7bb; --quiet:#8f9da1;
  --line:#3b4649; --line-strong:#526267;
  --text-secondary:#afbabf; --tint:rgba(177,198,204,.055);
  --bar-bg:rgba(202,220,225,.12); --header-bg:rgba(27,31,32,.91);
  --primary-bg:#dce6e9; --on-primary:#152327;
  --accent:#a9c2cd; --accent-soft:#2f3d42; --all:#cad5d9;
  --shadow:0 24px 64px rgba(0,0,0,.14);
  --graph-grid:rgba(176,201,209,.045); --graph-shine:rgba(54,70,76,.24);
  --graph-low:rgba(20,29,32,.13);
}
html:root[data-page="composer"]:not([data-theme="dark"]) {
  --bg:#edf1f2; --panel:rgba(247,249,250,.88); --panel-solid:#f7f9fa;
  --ink:#161819; --quiet:#9ea4a5;
  --line:rgba(22,24,25,.11); --line-strong:rgba(22,24,25,.19);
  --surface:rgba(252,254,255,.72); --surface-soft:rgba(255,255,255,.40);
  --surface-active:rgba(255,255,255,.9); --header-bg:rgba(237,241,242,.87);
  --shadow:0 20px 60px rgba(24,28,30,.08);
}
html:root[data-page="composer"][data-theme="dark"] {
  --bg:#121618; --panel:rgba(24,30,32,.95); --panel-solid:#181e20;
  --ink:#e8edef; --muted:#99a7ab; --quiet:#6a7c80;
  --line:rgba(202,220,225,.105); --line-strong:rgba(202,220,225,.23);
  --surface:rgba(42,51,55,.64); --surface-soft:rgba(37,45,48,.45);
  --header-bg:rgba(18,22,24,.91); --shadow:0 20px 60px rgba(0,0,0,.22);
}
/* Preserve the prismatic colors, but remove the green cast from their base. */
@media(min-width:721px) and (hover:hover) {
  html:root[data-page][data-theme] .button.primary:not(:disabled)::before {
    background-image:var(--prismatic-primary-fill),linear-gradient(#20282b,#20282b),var(--prismatic-primary-spectrum);
  }
}
/* A graphic accent uses the bright yellow, not the text-contrast yellow. */
html[data-page="home"] .tiny-spectrum {
  --yellow:#eab93f;
  background:linear-gradient(90deg,var(--blue) 0%,var(--blue) 17%,var(--red) 21%,var(--red) 37%,var(--yellow) 41%,var(--yellow) 57%,var(--green) 61%,var(--green) 77%,var(--purple) 81%,var(--purple) 100%);
}