/* Design tokens: fonts, colours (light + dark), type/spacing/radius/z-index scales. Change colours here only. */
/* Fonts are self-hosted (no requests to Google): latin + latin-ext subsets in css/fonts/. */
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/DMMono-latin-ext-0.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/DMMono-latin-1.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/DMMono-latin-ext-2.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/DMMono-latin-3.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/HankenGrotesk-latin-ext-4.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/HankenGrotesk-latin-5.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/HankenGrotesk-latin-ext-4.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/HankenGrotesk-latin-5.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/HankenGrotesk-latin-ext-4.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/HankenGrotesk-latin-5.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Breakpoints (media queries cannot read custom properties, so they are written as numbers):
     phone   max-width:600px   single column, bottom bars, 2-up grids
     tablet  max-width:960px   app sidebar becomes a drawer, public nav becomes the menu sheet
     wide    min-width:961px   (1100px also used: community aside, wizard summary, research contents)
   Older one-offs still in use: 340, 480, 560, 700, 760 (also pointer:coarse), 900, 1024. Fold them in only with a visual review. */
:root{
  --accent:#EDE274;          /* brand yellow: panels, buttons, highlights (same in dark mode on purpose) */
  --accent-deep:#DCCF45;
  --accent-light:#F2E88A;    /* radio beat flash on yellow panels */
  --on-accent:#15140E;       /* text on yellow; also the fixed ink of record labels and photo sleeves */
  --ground:#FBF8E1;          /* page ground: pale yellow */
  --paper:#FFFFFF;
  --mint:#F8F2BF;            /* soft highlight */
  --ink:#15140E;             /* text + lines */
  --ink-soft:#3B3927;
  --muted:#6B6750;
  --hair:rgba(21,20,14,.16);
  --hair-strong:#15140E;
  --dark:#15140E;            /* footer + radio */
  --on-dark:#F6F1C9;
  --on-dark-soft:rgba(246,241,201,.7);
  --viz:rgba(21,20,14,.12);  /* chart fill */
  --ok:#1E7A45;--warn:#9A5B00;--bad:#B3261E;
  --ok-bg:#E1F4E6;--warn-bg:#FFF0CF;--bad-bg:#FDE3E1;
  --info:#1d3f8f;--info-bg:#e6ecfb;   /* admin "paid" status (same in dark mode, as before) */
  --display:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
  --gutter:max(20px,env(safe-area-inset-left,0px));
  --gutter-r:max(20px,env(safe-area-inset-right,0px));
  --max:1360px;
  --player-h:64px;
  /* controls */
  --ctl-h:44px;              /* every tap target */
  --ctl-h-sm:36px;           /* .btn.sm and .chip on desktop (44px on touch) */
  --ring:0 0 0 1px var(--ink),0 0 0 4px var(--accent);
  /* type scale for UI text (headings use the clamp() classes .display .h1-.h4 in base.css) */
  --fs-micro:11px;           /* tags, table heads, small mono meta */
  --fs-caption:12px;         /* eyebrows, labels */
  --fs-ui:13px;              /* buttons, toasts */
  --fs-small:14px;           /* .small, secondary text */
  --fs-body-s:15px;          /* lists, tables, phone body */
  --fs-body:16px;            /* body, inputs (16px stops iOS zoom) */
  --fs-lead:18px;
  --fs-h5:20px;
  --fs-h4:22px;
  --fs-h3:28px;
  /* spacing scale (use it for new rules; older rules still use literals) */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:32px;--sp-8:48px;--sp-9:64px;
  /* radii: the design is square; round only for dots, avatars and pills */
  --r-0:0;--r-round:50%;--r-pill:999px;
  /* z-index layers (1-20 are local stacking inside one component) */
  --z-topbar:30;--z-drawer-scrim:35;--z-drawer:40;--z-sendbar:45;--z-menu-scrim:48;--z-menu:49;--z-header:50;
  --z-popover:60;            /* radio bar, account menu, bell panel */
  --z-progress:70;--z-modal:80;--z-toast:90;--z-tip:95;--z-skip:100;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#11110C;--paper:#1B1A13;--mint:#2A2814;--ink:#F3EEC8;--ink-soft:#DCD6AE;--muted:#A6A081;--hair:rgba(243,238,200,.16);--hair-strong:#F3EEC8;--dark:#0A0A07;--viz:rgba(237,226,116,.18);
    --ok:#6CD394;--warn:#F0B75A;--bad:#FF8A80;--ok-bg:rgba(108,211,148,.12);--warn-bg:rgba(240,183,90,.12);--bad-bg:rgba(255,138,128,.12);color-scheme:dark
  }
}
:root[data-theme="dark"]{
  --ground:#11110C;--paper:#1B1A13;--mint:#2A2814;--ink:#F3EEC8;--ink-soft:#DCD6AE;--muted:#A6A081;--hair:rgba(243,238,200,.16);--hair-strong:#F3EEC8;--dark:#0A0A07;--viz:rgba(237,226,116,.18);
  --ok:#6CD394;--warn:#F0B75A;--bad:#FF8A80;--ok-bg:rgba(108,211,148,.12);--warn-bg:rgba(240,183,90,.12);--bad-bg:rgba(255,138,128,.12);color-scheme:dark
}
[hidden]{display:none!important}