/* Croozn typography. Every value transcribed from /Style-Guide/Typography and
   the app component set. Outfit is the brand face; Inter carries numerals,
   HUD chips and iOS status bars; DM Sans appears in leaderboard/stat blocks. */

:root{
  --font-core:Outfit,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-ui:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-alt:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Marketing display face. Not from the .fig — supplied by the team. Used on the
     website and in marketing for stats, statements and H2 headers; rarely in-app. */
  --font-impact:Impact,"Haettenschweiler","Arial Narrow Bold","Anton",sans-serif;

  /* Weights as used in the file */
  --weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-extrabold:800;--weight-black:900;

  /* Line height — the file uses a single 1.3 across nearly all text */
  --leading-tight:1;--leading-default:1.3;

  /* Type scale (px, verbatim from the style guide + components) */
  --size-display:50px;   /* Outfit Light — style-guide page titles */
  --size-h1:40px;        /* Outfit Bold — reward / celebration headlines */
  --size-h2:25px;        /* Outfit SemiBold */
  --size-h3:25px;        /* Outfit SemiBold */
  --size-button:23px;    /* Outfit Bold — btn label */
  --size-question:23px;  /* Outfit Medium — quiz question stem */
  --size-body-lg:20px;   /* Outfit Light / Medium / Bold */
  --size-body:16px;      /* Outfit Medium */
  --size-body-sm:14px;   /* Outfit Medium */
  --size-label:13px;     /* Outfit Regular */
  --size-caption:12px;   /* Outfit Regular / Inter Bold */
  --size-micro:10px;     /* Inter Medium — HUD counters */
  --size-nano:9px;       /* Inter Regular — dense metadata */
  --size-tiny:8px;       /* Outfit Regular — pill microcopy */
}

.croozn-display{font-family:var(--font-core);font-weight:var(--weight-light);font-size:var(--size-display);line-height:var(--leading-default)}
.croozn-h1{font-family:var(--font-core);font-weight:var(--weight-bold);font-size:var(--size-h1);line-height:var(--leading-default)}
.croozn-h2{font-family:var(--font-core);font-weight:var(--weight-semibold);font-size:var(--size-h2);line-height:var(--leading-default)}
.croozn-h3{font-family:var(--font-core);font-weight:var(--weight-semibold);font-size:var(--size-h3);line-height:var(--leading-default)}
.croozn-question{font-family:var(--font-core);font-weight:var(--weight-medium);font-size:var(--size-question);line-height:var(--leading-default)}
.croozn-button{font-family:var(--font-core);font-weight:var(--weight-bold);font-size:var(--size-button);line-height:var(--leading-default)}
.croozn-body-lg{font-family:var(--font-core);font-weight:var(--weight-light);font-size:var(--size-body-lg);line-height:var(--leading-default)}
.croozn-body-lg-medium{font-family:var(--font-core);font-weight:var(--weight-medium);font-size:var(--size-body-lg);line-height:var(--leading-default)}
.croozn-body-lg-bold{font-family:var(--font-core);font-weight:var(--weight-bold);font-size:var(--size-body-lg);line-height:var(--leading-default)}
.croozn-body{font-family:var(--font-core);font-weight:var(--weight-medium);font-size:var(--size-body);line-height:var(--leading-default)}
.croozn-body-sm{font-family:var(--font-core);font-weight:var(--weight-medium);font-size:var(--size-body-sm);line-height:var(--leading-default)}
.croozn-label{font-family:var(--font-core);font-weight:var(--weight-regular);font-size:var(--size-label);line-height:var(--leading-default)}
.croozn-caption{font-family:var(--font-core);font-weight:var(--weight-regular);font-size:var(--size-caption);line-height:var(--leading-default)}
.croozn-hud{font-family:var(--font-ui);font-weight:var(--weight-bold);font-size:var(--size-caption);line-height:var(--leading-tight)}
.croozn-hud-sm{font-family:var(--font-ui);font-weight:var(--weight-medium);font-size:var(--size-micro);line-height:var(--leading-tight)}
.croozn-stat{font-family:var(--font-alt);font-weight:var(--weight-black);font-size:26.18px;line-height:var(--leading-tight)}

/* Impact — marketing / website only. Single weight, tight leading, sentence case
   like the rest of the brand. Never set below 25px. */
.croozn-impact-stat{font-family:var(--font-impact);font-weight:400;font-size:80px;line-height:0.95}
.croozn-impact-statement{font-family:var(--font-impact);font-weight:400;font-size:50px;line-height:1.05}
.croozn-impact-h2{font-family:var(--font-impact);font-weight:400;font-size:25px;line-height:1.2}