/* Humaniti Academy — brand tokens. The landing page takes every colour and type role from here; other Humaniti pages can link the same file. */
:root{
  /* red */
  --red:#A51C24;            /* the brand red: buttons, floods, accents, red lettering */
  --deep:#5E1014;           /* deep red: hard shadows, pressed states */
  --mat-1:#B8262E;          /* the red cutting-mat hero only: light side of its sheen */
  --mat-2:#8A1820;          /* the red cutting-mat hero only: dark side of its sheen */
  /* paper */
  --paper:#F5ECDC;          /* the page: beige grid paper */
  --sheet:#FFFDF8;          /* raised cards and notes */
  --beige:#FBF3E5;          /* light lettering and keys on red or black */
  /* ink */
  --ink:#1B1A19;            /* text, black sections */
  --ink-2:#262422;          /* raised surfaces on black (chat panel, keyboard body) */
  --mid:#68645E;            /* secondary text (passes 4.5:1 on paper) */
  --grey:#B9B6B0;           /* quiet detail only, never body text */
  --key-shade:#B5AB99;      /* the lower edge of a beige key */
  --line:color-mix(in srgb,var(--ink) 5%,transparent);/* hairlines of the page grid */
  --fg:var(--ink);
  /* type: three working families, one accent */
  --display:"Bricolage Grotesque",system-ui,"Helvetica Neue",sans-serif;   /* headlines */
  --sans:"Satoshi",system-ui,"Helvetica Neue",sans-serif;                  /* body and buttons */
  --mono:"Geist Mono",ui-monospace,monospace;                              /* kickers, labels, typed lines */
  --hand:"Caveat",cursive;                                                 /* accent only: short handwritten notes */
  --cut:"Bungee","Bricolage Grotesque",system-ui,sans-serif;                /* retired: no longer used on the page ("Talk to us" is set like every other heading). Kept so anything still pointing to it does not break */
  /* type scale: every text size on the page is one of these (lettering that is part of an artwork scales with the artwork instead) */
  --f-label:12px;                            /* 4 · the small label above a section, footnotes */
  --f-body:clamp(16px,.5vw + 11px,18px);     /* 3 · all content text, buttons, form fields */
  --f-sub:clamp(21px,1.1vw + 12px,28px);     /* 2 · smaller headings: card titles, row headings, prices */
  --f-large:clamp(34px,4.2vw + 8px,64px);    /* 1 · the large heading of each screen */
  /* the older names all resolve to one of the four above, so nothing on the page can sit in between */
  --t-micro:var(--f-label);--t-label:var(--f-label);
  --t-small:var(--f-body);--t-body:var(--f-body);--t-large:var(--f-body);--t-lede:var(--f-body);
  --t-h5:var(--f-sub);--t-h4:var(--f-sub);--t-h3:var(--f-sub);--t-h2:var(--f-sub);
  --t-h1:var(--f-large);--t-head:var(--f-large);--t-title:var(--f-large);--t-display:var(--f-large);
  /* spacing: every gap, padding and margin is one of these steps */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:40px;--s-8:48px;--s-9:64px;--s-10:80px;--s-11:96px;--s-12:120px;
  /* building blocks: the measurements every card, button and label shares */
  --bw:1.5px;               /* outline of cards, buttons, chips, dashed boxes */
  --lift:6px;               /* how far a card's hard shadow sits down and to the right */
  --r-pill:999px;           /* fully rounded: buttons, chips, the search bar */
  --r-panel:24px;           /* large rounded panels (the chat window) */
  --r-bubble:16px;          /* chat bubbles */
  --btn-h:48px;             /* every main button, and form fields */
  --btn-h-s:36px;           /* small pills: the header button, question chips */
  --pad:20px;
}
@media (min-width:900px){:root{--pad:48px}}