/* CollabX — design tokens, extracted from Figma variables on node 2106:2.
   letterSpacing in Figma variables is a PERCENTAGE: H2 "-3" renders as -1.68px
   on 56px (-3%). Every tracking value below is the resolved px. */
:root {
   /* type */
   --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

   /* brand — two distinct limes, do not unify.
     --lime is the button/brand fill; --lime-accent is the heading highlight. */
   --lime: #cfe100;
   --lime-accent: #cfff00;
   --green-pill: #29d53b;
   --green-surface: #16cb3d;
   --green-text: #0f9928;
   --green-text-alt: #16a637;

   /* ink */
   --ink: #0d0f0e;
   --ink-deep: #050504;
   --ink-case: #07100a;
   --ink-awards: #0a0c0a;
   --ink-chip: #0c110e;
   --ink-tour: #0f0f0f;
   --ink-stat: #1b1c1e;
   --ink-funnel: #111;

   /* surfaces */
   --page: #e7e6eb;
   --surface-card: #fafaf7;
   --surface-soft: #f6f7f4;
   --surface-stat: #f7f6f7;
   --surface-metric: #e8e9e6;
   --surface-quote: #111713;
   --surface-quote-border: #2b352e;
   --surface-trophy: #061009;
   --surface-creator-value: rgb(27 27 27 / .9);
   --surface-session: rgb(23 27 23 / .92);
   --surface-session-border: rgb(255 255 255 / .14);

   /* text */
   --text-on-dark: #f8f8f8;
   --text-on-dark-alt: #f5f6f3;
   --text-on-dark-soft: #f7f8f3;
   --text-muted-dark: #bcc4bf;
   --text-muted-dark-2: #c9d1cb;
   --text-muted-dark-3: #a4aea7;
   --text-muted-dark-4: #808c84;
   --text-muted-dark-5: #7e867f;
   --text-muted-dark-6: #acafad;
   --text-muted-dark-7: #a6a6a6;
   --text-muted-dark-8: #c2c2c2;
   --text-muted-dark-9: #aab3ac;
   --text-muted-dark-10: #bfbfbf;
   --text-body-light: #4b514c;
   --text-award-muted: #9da39d;
   --text-funnel-sub: #666a6b;

   /* awards */
   --award-gold: #f4c95d;
   --award-bronze: #d6935e;
   --award-silver: #e7ece9;

   /* button tokens — straight from Figma variables */
   --button-white: #ffffff;
   --button-lime: #cfe100;
   --button-ink: #0d0f0e;
   --button-off-white: #f6f7f4;
   --button-tour-ink: #0f0f0f;
  /* state colours, Figma Components / Buttons (2145:2) */
  --button-hover-ink: #1f2b24;
  --button-hover-lime: #deed24;
  --button-pressed-lime: #b5c400;
  --button-muted-surface: #333b36;
  --button-muted-content: #b2bab2;
  --button-muted-ink: #404742;
   --button-gap: 12px;
   --button-padding-inline: 35px;
   --button-padding-block: 20px;
   --button-radius: 42px;

   /* layout — 1440 frame, 1392 card, 100px content inset */
   --frame: 1440px;
   --card-w: 1392px;
   --gutter: 24px;
   --card-pad: 76px;
   --radius-section: 80px;
   --radius-card: 44px;
   --radius-inner: 32px;
}