/* Oqolo base: fonts and every design token. Component files use only these variables:
   no raw colors, font shorthands, radii or shadows inside components. */
@font-face { font-family: 'Inter Display'; font-weight: 400; font-display: swap; src: url('/fonts/InterDisplay-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-weight: 500; font-display: swap; src: url('/fonts/InterDisplay-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-weight: 600; font-display: swap; src: url('/fonts/InterDisplay-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-weight: 700; font-display: swap; src: url('/fonts/InterDisplay-Bold.woff2') format('woff2'); }

:root {
  /* surface */
  --surface-primary: #FFFFFF;
  --surface-secondary: #F2ECE7;
  --surface-tertiary: #F5EFEC;
  --surface-muted: #E8E0D8;
  --surface-sunken: #AAA299;
  /* text */
  --text-primary: #303030;
  --text-secondary: rgba(0,0,0,.5);
  --text-disabled: rgba(0,0,0,.2);
  --text-on-inverse-primary: #FFFFFF;
  --text-on-inverse-secondary: rgba(255,255,255,.5);
  /* interaction */
  --interaction-fill-primary: #415898;
  --interaction-fill-secondary: #547B3F;
  --interaction-fill-tertiary: #E1DAD2;
  --interaction-fill-error: #A93125;
  --interaction-fill-tint-primary: #CBD3DB;
  --interaction-fill-tint-success: #C8DBCD;
  --interaction-text-primary: #FFFFFF;
  --interaction-text-primary-muted: rgba(255,255,255,.6);
  /* status */
  --status-success: #029154;
  --status-warning: #FFBB00;
  --status-counter: #C31100;
  --status-toast: rgba(0,0,0,.8);
  --banner-dark: #382F24;
  /* tags */
  --tag-host: #646E7A;
  --tag-speaker: #766122; /* mockup Tag/Speaker 1180:9232 */
  /* card chips (mockup feed card 1719:14344), white text on both, contrast at least 4.5 to 1 (decision 019) */
  --tag-goal: #4370E3; /* Figma variable tag/intent */
  --tag-topic: #8E7200; /* Figma variable tag/interest is #9E7F00 (3.8 to 1 with white), same hue darkened to 4.6 to 1 */
  /* divider */
  --divider: rgba(0,0,0,.15);

  /* fonts */
  --font: 'Inter Display', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-email: Helvetica, Arial, sans-serif;
  /* type: weight size/line-height, use as `font: var(--type-body-m)`; headings also need their --tracking */
  --type-h1: 700 40px/38px var(--font);
  --type-h2: 700 30px/30px var(--font);
  --type-h3: 700 23px/22px var(--font);
  --tracking-h1: -0.8px;
  --tracking-h2: -0.6px;
  --tracking-h3: -0.23px;
  --type-body-l: 400 17px/19px var(--font);
  --type-body-l-med: 500 17px/19px var(--font);
  --type-body-l-bold: 600 17px/19px var(--font);
  --type-body-m: 400 15px/17px var(--font);
  --type-body-m-med: 500 15px/17px var(--font);
  --type-body-m-bold: 600 15px/17px var(--font);
  --type-body-s: 400 13px/15px var(--font);
  --type-body-s-med: 500 13px/15px var(--font);
  --type-body-s-bold: 600 13px/15px var(--font);
  --type-body-xs-med: 500 11px/12px var(--font);
  --type-body-xs-bold: 600 11px/12px var(--font);
  --type-caps: 700 13px/15px var(--font);  /* section label in capitals; needs --tracking-caps */
  --tracking-caps: 0.39px;

  /* spacing scale: the only distances components use */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;

  /* radius */
  --radius-xs: 3px;
  --radius-s: 4px;
  --radius-m: 6px;
  --radius-l: 8px;
  --radius-pill: 999px;   /* fully round ends; works for any height */

  /* effects */
  --stroke-hairline: inset 0 0 0 .5px var(--divider);
  --shadow-toast: 0 0 8px 0 rgba(0,0,0,.4);
  --shadow-soft: 0 0 12px rgba(63,58,54,.1);
  --blur-s: blur(2.5px);
  --blur-m: blur(6px);
  --fade-bottom: linear-gradient(to top, rgba(242,236,231,.7) 0%, rgba(242,236,231,0) 50%);
  --scrim: rgba(30,24,18,.45);
}

/* Text styles as classes, for markup that has no component of its own */
.t-h1 { font: var(--type-h1); letter-spacing: var(--tracking-h1); }
.t-h2 { font: var(--type-h2); letter-spacing: var(--tracking-h2); }
.t-h3 { font: var(--type-h3); letter-spacing: var(--tracking-h3); }
.t-body-l { font: var(--type-body-l); }
.t-body-l-med { font: var(--type-body-l-med); }
.t-body-l-bold { font: var(--type-body-l-bold); }
.t-body-m { font: var(--type-body-m); }
.t-body-m-med { font: var(--type-body-m-med); }
.t-body-m-bold { font: var(--type-body-m-bold); }
.t-body-s { font: var(--type-body-s); }
.t-body-s-med { font: var(--type-body-s-med); }
.t-body-s-bold { font: var(--type-body-s-bold); }
.t-body-xs-med { font: var(--type-body-xs-med); }
.t-body-xs-bold { font: var(--type-body-xs-bold); }

* { box-sizing: border-box; }
body { font-family: var(--font); color: var(--text-primary); -webkit-font-smoothing: antialiased; font-feature-settings: "lnum" 1, "pnum" 1; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; }
input { font: inherit; color: inherit; }