/* Croozn design tokens — concatenated from the design system */

/* tokens/fonts.css */
/* Croozn webfonts. The .fig ships no font binaries; Outfit, Inter and DM Sans
   are all published on Google Fonts under the exact family names the file uses.
   Highway Gothic (used once, on in-game road-sign artwork) has no Google Fonts
   equivalent and is NOT substituted — see readme.md "Font substitutions". */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&family=DM+Sans:wght@400;700;900&display=swap');


/* tokens/fig-tokens.css */
/* Generated from Figma Variables. First mode = :root default.
   FLOAT tokens are unitless — multiply by 1px in calc() where a length is needed. */

:root {
  --aero-aero-1: rgb(102,215,244); /* @kind color */
  --aero-aero-2: rgb(168,231,251); /* @kind color */
  --aero-aero-3: rgb(212,243,253); /* @kind color */
  --aero-aero-4: rgb(233,249,254); /* @kind color */
  --aero-aero-main: rgb(38,196,244); /* @kind color */
  --aero-aero-tone-1: rgb(29,172,215); /* @kind color */
  --aero-aero-tone-2: rgb(23,142,178); /* @kind color */
  --blue-dark-70: rgb(88,87,119); /* @kind color */
  --blue-dark-main: rgb(17,15,61); /* @kind color */
  --blue-light-main-2: rgb(52,198,244); /* @kind color */
  --blue-light-main: rgb(52,198,244); /* @kind color */
  --boost-boost-1: rgb(139,233,63); /* @kind color */
  --boost-boost-2: rgb(168,238,111); /* @kind color */
  --boost-boost-3: rgb(197,244,159); /* @kind color */
  --boost-boost-4: rgb(226,249,207); /* @kind color */
  --boost-boost-tone1: rgb(92,187,15); /* @kind color */
  --boost-boost-tone2: rgb(67,135,12); /* @kind color */
  --boost-boost: rgb(110,227,15); /* @kind color */
  --container-primary: var(--primary-1); /* @kind color */
  --container-secondary: var(--primary-main-3); /* @kind color */
  --error-main: var(--red-main); /* @kind color */
  --galaxy-clutch: rgb(239,234,242); /* @kind color */
  --galaxy-galaxy-1: rgb(118,68,255); /* @kind color */
  --galaxy-galaxy-2: rgb(138,95,255); /* @kind color */
  --galaxy-galaxy-3: rgb(171,140,255); /* @kind color */
  --galaxy-galaxy-4: rgb(188,163,255); /* @kind color */
  --galaxy-galaxy-5: rgb(222,209,255); /* @kind color */
  --galaxy-galaxy-main: rgb(88,26,255); /* @kind color */
  --galaxy-galaxy-tone1: rgb(71,20,210); /* @kind color */
  --galaxy-galaxy-tone2: rgb(52,15,153); /* @kind color */
  --gray-900: rgb(30,30,30); /* @kind color */
  --green-main-2: rgb(58,215,177); /* @kind color */
  --green-main: rgb(58,215,177); /* @kind color */
  --grey-40-black: rgb(166,168,171); /* @kind color */
  --grey-5-black: rgb(240,241,241); /* @kind color */
  --grey-60-black: rgb(128,129,132); /* @kind color */
  --grey-white-2: rgb(255,255,255); /* @kind color */
  --grey-white: rgb(255,255,255); /* @kind color */
  --icon-action-hover: var(--primary-main); /* @kind color */
  --icon-default-default: var(--gray-900); /* @kind color */
  --icon-primary: var(--neutral-40-black); /* @kind color */
  --icon-success: var(--success-main); /* @kind color */
  --midnight-midnight-1: rgb(46,45,81); /* @kind color */
  --midnight-midnight-2: rgb(90,89,117); /* @kind color */
  --midnight-midnight-3: rgb(161,160,176); /* @kind color */
  --midnight-midnight-4: rgb(208,208,216); /* @kind color */
  --midnight-midnight-5: rgb(231,231,235); /* @kind color */
  --midnight-midnight-main: rgb(19,18,58); /* @kind color */
  --neutral-40-black: var(--grey-40-black); /* @kind color */
  --neutral-5-black: var(--grey-5-black); /* @kind color */
  --neutral-60-black: var(--grey-60-black); /* @kind color */
  --neutral-white-2: var(--grey-white); /* @kind color */
  --neutral-white: var(--grey-white); /* @kind color */
  --primary-1: var(--galaxy-galaxy-1); /* @kind color */
  --primary-2: var(--galaxy-galaxy-2); /* @kind color */
  --primary-3: var(--galaxy-galaxy-3); /* @kind color */
  --primary-4: var(--galaxy-galaxy-4); /* @kind color */
  --primary-5: var(--galaxy-galaxy-5); /* @kind color */
  --primary-main-2: var(--blue-light-main); /* @kind color */
  --primary-main-3: var(--galaxy-galaxy-main); /* @kind color */
  --primary-main: var(--blue-light-main); /* @kind color */
  --primary-tone1: var(--galaxy-galaxy-tone1); /* @kind color */
  --primary-tone2: var(--galaxy-galaxy-tone2); /* @kind color */
  --primary: var(--galaxy-galaxy-main); /* @kind color */
  --purple-light: rgb(118,68,255); /* @kind color */
  --red-main: rgb(253,132,132); /* @kind color */
  --rogue-rogue-1: rgb(241,73,90); /* @kind color */
  --rogue-rogue-2: rgb(244,118,131); /* @kind color */
  --rogue-rogue-3: rgb(248,164,173); /* @kind color */
  --rogue-rogue-4: rgb(251,209,214); /* @kind color */
  --rogue-rogue-tone1: rgb(206,14,34); /* @kind color */
  --rogue-rogue-tone2: rgb(153,0,17); /* @kind color */
  --rogue-rogue: rgb(237,27,49); /* @kind color */
  --secondary: var(--galaxy-galaxy-5); /* @kind color */
  --spark: rgb(229,255,0); /* @kind color */
  --success-main-2: var(--green-main); /* @kind color */
  --success-main: var(--green-main); /* @kind color */
  --surface-secondary: var(--neutral-white); /* @kind color */
  --surface-status: var(--primary-main); /* @kind color */
  --surface-white: var(--surface-secondary); /* @kind color */
  --surface: var(--midnight-midnight-main); /* @kind color */
  --tertiary-70: rgb(88,87,119); /* @kind color */
  --tertiary: var(--primary-tone2); /* @kind color */
  --text-inverse: var(--neutral-white); /* @kind color */
  --text-primary: var(--white); /* @kind color */
  --text-secondary-2: var(--galaxy-clutch); /* @kind color */
  --text-secondary: var(--neutral-60-black); /* @kind color */
  --torque: rgb(249,168,26); /* @kind color */
  --ultra-ultra-100: rgb(255,229,249); /* @kind color */
  --ultra-ultra-200: rgb(255,204,244); /* @kind color */
  --ultra-ultra-300: rgb(255,179,244); /* @kind color */
  --ultra-ultra-500: rgb(255,128,227); /* @kind color */
  --ultra-ultra-700: rgb(255,77,215); /* @kind color */
  --ultra-ultra: rgb(255,0,198); /* @kind color */
  --white-1000: rgb(255,255,255); /* @kind color */
  --white: rgb(255,255,255); /* @kind color */
}

:root[data-mode="insights"] {
  --neutral-40-black: var(--grey-40-black); /* @kind color */
  --neutral-white: var(--grey-white); /* @kind color */
  --primary-main: var(--blue-light-main); /* @kind color */
  --success-main: var(--green-main); /* @kind color */
  --tertiary-70: rgb(88,87,119); /* @kind color */
}

:root[data-theme="light"], .light {
  --container-primary: var(--primary-1); /* @kind color */
  --container-secondary: var(--primary-main-3); /* @kind color */
  --icon-action-hover: var(--primary-main); /* @kind color */
  --icon-primary: var(--neutral-white); /* @kind color */
  --icon-success: var(--success-main); /* @kind color */
  --surface-secondary: var(--tertiary-70); /* @kind color */
  --surface: var(--galaxy-clutch); /* @kind color */
  --text-primary: var(--midnight-midnight-main); /* @kind color */
  --text-secondary-2: var(--galaxy-clutch); /* @kind color */
  --text-secondary: var(--neutral-5-black); /* @kind color */
}

:root[data-theme="dark"], .dark {
  --icon-action-hover: var(--primary-main); /* @kind color */
  --icon-default-default: var(--white-1000); /* @kind color */
  --icon-primary: var(--neutral-white); /* @kind color */
  --icon-success: var(--success-main); /* @kind color */
  --surface-secondary: var(--tertiary-70); /* @kind color */
  --text-secondary: var(--neutral-5-black); /* @kind color */
}

:root[data-mode="secondary"] {
  --surface-status: var(--success-main); /* @kind color */
  --surface-white: var(--surface-secondary); /* @kind color */
  --text-inverse: var(--neutral-white); /* @kind color */
}

:root[data-mode="tertiary"] {
  --surface-status: var(--error-main); /* @kind color */
  --surface-white: var(--surface-secondary); /* @kind color */
  --text-inverse: var(--primary-main); /* @kind color */
}

:root[data-mode="subtle"] {
  --surface-status: var(--primary-main); /* @kind color */
  --surface-white: var(--surface-secondary); /* @kind color */
  --text-inverse: var(--neutral-white); /* @kind color */
}

:root[data-mode="disabled"] {
  --primary: var(--midnight-midnight-1); /* @kind color */
  --secondary: var(--midnight-midnight-3); /* @kind color */
  --tertiary: var(--midnight-midnight-main); /* @kind color */
}

:root[data-mode="blue"] {
  --primary-1: var(--aero-aero-1); /* @kind color */
  --primary-2: var(--aero-aero-2); /* @kind color */
  --primary-3: var(--aero-aero-3); /* @kind color */
  --primary-4: var(--aero-aero-4); /* @kind color */
  --primary-5: var(--aero-aero-4); /* @kind color */
  --primary-main-3: var(--aero-aero-main); /* @kind color */
  --primary-tone1: var(--aero-aero-tone-1); /* @kind color */
  --primary-tone2: var(--aero-aero-tone-2); /* @kind color */
}


/* tokens/palette.css */
/* Croozn semantic palette. Base ramps live in fig-tokens.css (generated straight
   from the Figma Variable collections). These are the human-readable aliases the
   app screens actually reach for. Every hex is a verbatim Figma value. */

:root{
  /* ── Named ramps (mirrors of the Figma primitives, kebab-cased for authoring) */
  --croozn-galaxy:rgb(88,26,255);      /* primary purple — brand core */
  --croozn-galaxy-1:rgb(118,68,255);   /* the purple used on buttons + app bg */
  --croozn-galaxy-2:rgb(138,95,255);
  --croozn-galaxy-3:rgb(171,140,255);
  --croozn-galaxy-4:rgb(188,163,255);
  --croozn-galaxy-5:rgb(222,209,255);
  --croozn-galaxy-tone1:rgb(71,20,210);
  --croozn-galaxy-tone2:rgb(52,15,153);

  --croozn-midnight:rgb(19,18,58);     /* dark surface */
  --croozn-midnight-1:rgb(46,45,81);
  --croozn-midnight-2:rgb(90,89,117);
  --croozn-midnight-3:rgb(161,160,176);
  --croozn-midnight-4:rgb(208,208,216);
  --croozn-midnight-5:rgb(231,231,235);

  --croozn-aero:rgb(38,196,244);       /* cyan — secondary / logo smile */
  --croozn-aero-1:rgb(102,215,244);
  --croozn-aero-2:rgb(168,231,251);
  --croozn-aero-3:rgb(212,243,253);
  --croozn-aero-4:rgb(233,249,254);
  --croozn-aero-logo:rgb(0,201,249);   /* exact cyan of the wordmark arcs */

  --croozn-boost:rgb(110,227,15);      /* lime — correct / go */
  --croozn-boost-1:rgb(139,233,63);
  --croozn-boost-tone1:rgb(92,187,15);

  --croozn-rogue:rgb(237,27,49);       /* red — incorrect / stop */
  --croozn-rogue-1:rgb(241,73,90);
  --croozn-rogue-tone1:rgb(206,14,34);

  --croozn-ultra:rgb(255,0,198);       /* magenta — streaks, road accents */
  --croozn-ultra-300:rgb(255,179,244);
  --croozn-ultra-500:rgb(255,128,227);

  --croozn-spark:rgb(229,255,0);       /* acid yellow — XP highlight */
  --croozn-torque:rgb(249,168,26);     /* amber — fuel-up / bonus */
  --croozn-clutch:rgb(239,234,242);    /* off-white surface */
  --croozn-white:rgb(255,255,255);

  /* ── Semantic aliases */
  --brand-primary:var(--croozn-galaxy);
  --brand-primary-bright:var(--croozn-galaxy-1);
  --brand-secondary:var(--croozn-aero);

  --surface-app:var(--croozn-galaxy-1);        /* full-screen purple game field */
  --surface-dark:var(--croozn-midnight);
  --surface-light:var(--croozn-clutch);
  --surface-card:var(--croozn-white);
  --surface-card-dark:var(--croozn-midnight-1);
  --surface-chip:rgba(255,255,255,0.6);        /* frosted HUD chips */
  --surface-chip-dim:rgba(255,255,255,0.4);
  --surface-scrim:rgba(19,18,58,0.6);

  --text-on-dark:var(--croozn-white);
  --text-on-light:var(--croozn-midnight);
  --text-muted-on-dark:rgba(255,255,255,0.6);
  --text-muted-on-light:var(--croozn-midnight-2);

  --state-correct:var(--croozn-boost);
  --state-incorrect:var(--croozn-rogue);
  --state-selected:var(--croozn-ultra);
  --state-locked:var(--croozn-midnight-1);
  --state-bonus:var(--croozn-torque);
  --state-xp:var(--croozn-spark);

  --freshness-fresh:var(--croozn-boost);
  --freshness-decaying:var(--croozn-torque);
  --freshness-dead:var(--croozn-rogue);

  --border-hairline:rgba(255,255,255,0.2);
  --border-strong:var(--croozn-white);

  /* Link colours — no links appear in the source; these follow the palette. */
  --link:var(--croozn-aero);
  --link-hover:var(--croozn-aero-1);
}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline}


/* tokens/typography.css */
/* 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;

  /* 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)}


/* tokens/space.css */
/* Croozn geometry + motion. Values observed across the app component set:
   gaps and paddings cluster on 5px steps, radii are large and pill-first,
   and elevation is a hard offset "lip" with no blur (a game-UI convention),
   with soft ambient shadows reserved for floating map pins. */

:root{
  /* Spacing — the 5px step ladder the auto-layouts use */
  --space-1:5px;--space-2:10px;--space-3:14px;--space-4:16px;--space-5:20px;
  --space-6:25px;--space-7:30px;--space-8:40px;--space-9:65px;

  /* Radii */
  --radius-sm:10px;    /* app frame corners, small chips */
  --radius-md:20px;    /* legacy button, list rows */
  --radius-lg:30px;    /* colour swatches, cards, drawers */
  --radius-xl:40px;    /* primary button + HUD pills */
  --radius-full:999px; /* avatars, nav dots, progress caps */

  /* Elevation — hard-lip shadows, no blur */
  --lip-white:0px 4px 0px 0px rgb(255,255,255);
  --lip-boost:0px 4px 0px 0px var(--croozn-boost-tone1);
  --lip-rogue:0px 4px 0px 0px var(--croozn-rogue-tone1);
  --lip-galaxy:0px 4px 0px 0px var(--croozn-galaxy-tone2);
  --lip-dark:0px 4px 0px 0px var(--croozn-midnight);

  /* Rings — drawn as inset shadows in the source, not borders */
  --ring-white-2:inset 0 0 0 2px rgb(255,255,255); /* @kind shadow */
  --ring-white-1:inset 0 0 0 1px rgb(255,255,255); /* @kind shadow */

  /* Ambient — floating map markers and drawers only */
  --shadow-pin:0px 6px 12px rgba(19,18,58,0.35);
  --shadow-drawer:0px -8px 24px rgba(19,18,58,0.25);

  /* Motion */
  --ease-out:cubic-bezier(0.22,0.61,0.36,1); /* @kind other */
  --ease-pop:cubic-bezier(0.34,1.56,0.64,1); /* @kind other */
  --dur-fast:120ms; /* @kind other */
  --dur-base:200ms; /* @kind other */
  --dur-slow:400ms; /* @kind other */
}