/* The Billionaire Daily: design tokens
   Source of truth: design_mockups/src/tbd.css (PSM Web Designer answers, Oct 26 2026, 2:15 AM ET:
   tbd.css wins over spec text). Values below match tbd.css.

   Breakpoints (documentation tokens; CSS variables cannot be used inside @media):
     max 767        mobile (prose 18/30, side 24)
     768 to 1199    tablet (type steps down, side 40)
     1200 and up    desktop type, side 80
     below 1360     menu button replaces the nav
     1360 and up    full eight link nav (1360 to 1439 tightened nav)
     374 and below  side padding 20
   tbd.css also has component-level queries at 1023, 900, 599, 399, 359 and a max-height 700 rule;
   those stay inside component CSS and are not layout breakpoints.
*/
:root{
  /* Color: dark (default) */
  --ink-0:#0B0B0A; --ink-1:#131311; --ink-2:#1C1B18;
  --line:#2C2A26; --line-strong:#77705F;
  --text-1:#F2EEE6; --text-2:#BFB8AA; --text-3:#A0998A;
  --accent:#C9A66B; --accent-hover:#DDBD86; --on-accent:#0B0B0A; --error:#F2836F;
  /* Color: paper (light reading mode, article body only) */
  --paper:#F5F1EA; --paper-2:#EAE4D9; --paper-ink:#16140F; --paper-text-2:#4D473D;
  --paper-text-3:#6A6356; --accent-on-light:#7A5A22; --paper-line:#8C8576;
  --scrim:rgba(11,11,10,.78); /* popup backdrop, spec section 7 */
  --focus-ring:3px solid #C9A66B; --focus-offset:3px;

  /* Font stacks. Fallbacks are metric-adjusted faces defined in fonts.css. */
  /* Headings: Archivo, fallback "Helvetica Neue", Arial with size-adjust. Text: Instrument Sans, fallback Arial.
     The masthead is always the SVG wordmark, never live text. */
  --display:"Archivo","BD Archivo Fallback","Helvetica Neue",Arial,sans-serif;
  --display-wdth:106%;
  --sans:"Instrument Sans","BD Instrument Fallback",Arial,sans-serif;

  /* Space scale (spec section 2): 4 8 12 16 24 32 48 64 96 128 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* Layout */
  --max:1280px; --side:80px; --gutter:24px; --section:128px; --radius:2px;
  --header-h:92px; --logo-h:52px; --logo-w:198px; --footer-logo-h:76px;
  --control-h:52px; --control-h-sm:48px; /* small button: min-height 48 (tap), visual about 44 */
  --btn-sm-visual:44px; --tap:48px; --pop-close:48px; --pop-sheet-max:55vh; /* mobile popup bottom sheet */ --tag-h:24px; --strip-h:48px;
  --measure:680px;  /* article prose max (tbd.css .prose) */
  --lead-max:720px; /* article lead/dek max */
  --nfa-max:720px;
  --nav-gap:30px; --nav-size:13px; --nav-track:.12em;

  /* Type scale at 1440 (desktop, 1200 and up): size / line-height / weight / tracking */
  --t-display:68px; --lh-display:74px; --w-display:650; --tr-display:-.018em;
  --t-h1:56px;      --lh-h1:62px;      --w-h1:650;      --tr-h1:-.016em;
  --t-h2:40px;      --lh-h2:48px;      --w-h2:600;      --tr-h2:-.012em;
  --t-ph2:30px;     --lh-ph2:38px;     --w-ph2:600;     --tr-ph2:-.01em;  /* prose subhead */
  --t-h3:28px;      --lh-h3:36px;      --w-h3:600;      --tr-h3:-.008em;
  --t-h4:22px;      --lh-h4:29px;      --w-h4:600;      --tr-h4:-.004em;
  --t-lead:20px;    --lh-lead:32px;    --w-lead:400;
  --t-body:17px;    --lh-body:28px;    --w-body:400;    /* UI and page body */
  --t-prose:19px;   --lh-prose:32px;   /* article prose, 18/30 at 767 and below */
  --t-small:14px;   --lh-small:22px;
  --t-meta:13px;    --lh-meta:20px;    --w-meta:500;    --tr-meta:.02em;
  --t-eyebrow:12px; --lh-eyebrow:16px; --w-eyebrow:600; --tr-eyebrow:.16em;
  --t-btn:13px;     --w-btn:600;       --tr-btn:.12em;
}

/* 1360 to 1439: tightened full nav */
@media (min-width:1360px) and (max-width:1439px){
  :root{--nav-gap:24px; --nav-size:12px; --nav-track:.08em}
}

/* Tablet type column and side padding: 768 to 1199 */
@media (max-width:1199px){
  :root{
    --side:40px; --section:96px;
    --t-display:52px; --lh-display:58px;
    --t-h1:44px;      --lh-h1:50px;
    --t-h2:32px;      --lh-h2:40px;
    --t-h3:24px;      --lh-h3:32px;
    /* prose h2, h4, lead, body, small, meta unchanged at tablet */
  }
}

/* Mobile: max 767 */
@media (max-width:767px){
  :root{
    --side:24px; --section:72px; --gutter:16px;
    --header-h:72px; --logo-h:40px; --logo-w:152px; --footer-logo-h:60px;
    --t-display:36px; --lh-display:42px; --tr-display:-.014em;
    --t-h1:32px;      --lh-h1:38px;      --tr-h1:-.012em;
    --t-h2:26px;      --lh-h2:32px;
    --t-ph2:26px;     --lh-ph2:32px;
    --t-h3:22px;      --lh-h3:29px;
    --t-h4:20px;      --lh-h4:27px;
    --t-lead:17px;    --lh-lead:28px;
    --t-body:16px;    --lh-body:26px;
    --t-prose:18px;   --lh-prose:30px;
  }
}

/* Smallest: 374 and below */
@media (max-width:374px){
  :root{--side:20px; --t-btn:12px; --tr-btn:.1em}
}

/* Type utility classes, mapped 1:1 to the tokens */
.t-display,.t-h1,.t-h2,.t-ph2,.t-h3,.t-h4{font-family:var(--display);font-stretch:var(--display-wdth);color:var(--text-1);margin:0}
.t-display{font-size:var(--t-display);line-height:var(--lh-display);font-weight:var(--w-display);letter-spacing:var(--tr-display)}
.t-h1{font-size:var(--t-h1);line-height:var(--lh-h1);font-weight:var(--w-h1);letter-spacing:var(--tr-h1)}
.t-h2{font-size:var(--t-h2);line-height:var(--lh-h2);font-weight:var(--w-h2);letter-spacing:var(--tr-h2)}
.t-ph2{font-size:var(--t-ph2);line-height:var(--lh-ph2);font-weight:var(--w-ph2);letter-spacing:var(--tr-ph2)}
.t-h3{font-size:var(--t-h3);line-height:var(--lh-h3);font-weight:var(--w-h3);letter-spacing:var(--tr-h3)}
.t-h4{font-size:var(--t-h4);line-height:var(--lh-h4);font-weight:var(--w-h4);letter-spacing:var(--tr-h4)}
.t-lead{font-family:var(--sans);font-size:var(--t-lead);line-height:var(--lh-lead);font-weight:400}
.t-prose{font-family:var(--sans);font-size:var(--t-prose);line-height:var(--lh-prose);max-width:var(--measure)}
.t-body{font-family:var(--sans);font-size:var(--t-body);line-height:var(--lh-body);font-weight:400}
.t-small{font-family:var(--sans);font-size:var(--t-small);line-height:var(--lh-small);font-weight:400}
.t-meta{font-family:var(--sans);font-size:var(--t-meta);line-height:var(--lh-meta);font-weight:var(--w-meta);letter-spacing:var(--tr-meta);font-variant-numeric:tabular-nums}
.t-eyebrow{font-family:var(--sans);font-size:var(--t-eyebrow);line-height:var(--lh-eyebrow);font-weight:var(--w-eyebrow);letter-spacing:var(--tr-eyebrow);text-transform:uppercase}
.t-btn{font-family:var(--sans);font-size:var(--t-btn);font-weight:var(--w-btn);letter-spacing:var(--tr-btn);text-transform:uppercase;white-space:nowrap}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

/* Small button: visual about 44, tap target 48 (invisible 2px extension above and below).
   tbd.css makes it a full 48 at 1023 and below. Popup close is 48x48. */
.btn-sm{position:relative;height:var(--btn-sm-visual)}
.btn-sm::after{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px}
@media (max-width:1023px){.btn-sm{height:var(--control-h-sm)}.btn-sm::after{display:none}}
.pop .x{width:var(--pop-close);height:var(--pop-close)}
@media (max-width:767px){.pop{max-height:var(--pop-sheet-max)}}