/* AVAIO Core design tokens: the single source for colour, type, spacing and shape.
 *
 * Values come from the AVAIO Brand Guidelines (Final Brand / 05. Brand Book):
 *   Night colours  Purple #563597 · Light Purple #AB9DE0 · Dark Purple #211730 · Black #000000
 *   Day colours    Gold #DDBB6C · Bronze #A88042 · Ivory #E7E5DC · White #FFFFFF
 *   Type           Merriweather Regular for headers, Instrument Sans Medium for subheaders,
 *                  Instrument Sans Regular for body copy
 * and from avaiodigital.com (page background #F4F3EA, pill buttons, 8px card corners).
 *
 * Every variable is prefixed --av- so these tokens can sit on pages (like the Atlas) that
 * define their own unprefixed variables. Pages should use the semantic tokens (--av-ink,
 * --av-surface ...) rather than the raw brand swatches, so light and dark both work.
 */
@font-face{font-family:"Instrument Sans";src:url("/static/fonts/InstrumentSans-Variable.woff2") format("woff2");
  font-weight:400 700;font-stretch:75% 100%;font-style:normal;font-display:swap}
@font-face{font-family:"Merriweather";src:url("/static/fonts/Merriweather-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Merriweather";src:url("/static/fonts/Merriweather-Light.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Merriweather";src:url("/static/fonts/Merriweather-Italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap}

:root{
  /* ---- brand swatches (do not change without the brand book) ---- */
  --av-purple:#563597; --av-light-purple:#AB9DE0; --av-dark-purple:#211730; --av-black:#000000;
  --av-gold:#DDBB6C;   --av-bronze:#A88042;       --av-ivory:#E7E5DC;       --av-white:#FFFFFF;
  --av-paper:#F4F3EA;  /* avaiodigital.com page background */

  /* ---- type ---- */
  --av-serif:"Merriweather",Georgia,"Times New Roman",serif;
  --av-sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --av-fs-xs:12px; --av-fs-sm:13px; --av-fs-md:15px; --av-fs-lg:17px;
  --av-fs-h4:22px; --av-fs-h3:28px; --av-fs-h2:clamp(28px,3.4vw,40px); --av-fs-h1:clamp(36px,5.2vw,60px);

  /* ---- shape and space ---- */
  --av-r-sm:6px; --av-r-md:8px; --av-r-lg:16px; --av-r-xl:24px; --av-r-pill:999px;
  --av-gap:16px; --av-page:1200px; --av-gutter:clamp(16px,4vw,40px);

  /* ---- semantic colours: Day (default) ---- */
  color-scheme:light;
  --av-bg:#F4F3EA;            /* page */
  --av-surface:#FFFFFF;       /* cards, panels */
  --av-surface-2:#FAF9F3;     /* raised rows, inputs */
  --av-sunk:#ECEADF;          /* wells, pressed states */
  --av-ink:#211730;           /* body text: dark purple */
  --av-ink-2:#4E4560;         /* secondary text */
  --av-ink-3:#6F6780;         /* captions, labels (4.8:1 on --av-bg) */
  --av-rule:#E2DED2; --av-rule-2:#CEC8B8;
  --av-accent:#563597;        /* links, focus, primary action */
  --av-accent-ink:#FFFFFF;
  --av-accent-soft:rgba(86,53,151,.08);
  --av-highlight:#DDBB6C;     /* gold: dots, live markers, the one warm accent */
  --av-bronze-ink:#8A6630;    /* bronze dark enough for text on ivory */
  --av-ok:#2E7658; --av-warn:#8A6630; --av-err:#A3312A;
  --av-focus:#563597;
  --av-shadow:0 1px 2px rgba(33,23,48,.06),0 12px 32px -16px rgba(33,23,48,.22);
  --av-header-bg:rgba(244,243,234,.82);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --av-bg:#150E1F; --av-surface:#211730; --av-surface-2:#281D3A; --av-sunk:#100A18;
    --av-ink:#F4F3EA; --av-ink-2:#CBC4D6; --av-ink-3:#A39BB2;
    --av-rule:#34294A; --av-rule-2:#46395F;
    --av-accent:#AB9DE0; --av-accent-ink:#211730; --av-accent-soft:rgba(171,157,224,.12);
    --av-highlight:#DDBB6C; --av-bronze-ink:#DDBB6C;
    --av-ok:#6CC49B; --av-warn:#DDBB6C; --av-err:#F08A80;
    --av-focus:#AB9DE0;
    --av-shadow:0 1px 2px rgba(0,0,0,.4),0 14px 36px -16px rgba(0,0,0,.7);
    --av-header-bg:rgba(33,23,48,.82);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --av-bg:#150E1F; --av-surface:#211730; --av-surface-2:#281D3A; --av-sunk:#100A18;
  --av-ink:#F4F3EA; --av-ink-2:#CBC4D6; --av-ink-3:#A39BB2;
  --av-rule:#34294A; --av-rule-2:#46395F;
  --av-accent:#AB9DE0; --av-accent-ink:#211730; --av-accent-soft:rgba(171,157,224,.12);
  --av-highlight:#DDBB6C; --av-bronze-ink:#DDBB6C;
  --av-ok:#6CC49B; --av-warn:#DDBB6C; --av-err:#F08A80;
  --av-focus:#AB9DE0;
  --av-shadow:0 1px 2px rgba(0,0,0,.4),0 14px 36px -16px rgba(0,0,0,.7);
  --av-header-bg:rgba(33,23,48,.82);
}