/* === BullBear DS bundle (Round 7) — self-host fonts + Wanted DS tokens ===
   Source: redesing/_ds/.../tokens/*. Dark theme keyed by .dark (matches toggle). */
/* BullBear — self-hosted DS webfonts (Round 7, Wanted Design System).
   Pretendard Variable is self-hosted (one file, full Latin + Korean, free
   OFL license — orioncactus/pretendard). It is the DS's designated CJK
   companion and visually matches Wanted Sans (the brand face is listed first
   in the stack so it's used if locally available; otherwise Pretendard).
   No CDN dependency. */
@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/PretendardVariable.woff2") format("woff2-variations");
}

:root {
  --font-sans: "Wanted Sans Variable", "Wanted Sans", "Pretendard Variable",
    Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo",
    "Malgun Gothic", sans-serif;
  --font-cjk: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo",
    "Malgun Gothic", sans-serif;
  --font-mono: "SF Mono", ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
}

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

:root {
  --accent-background-cyan-2: var(--cyan-50-2); /* @kind color */
  --accent-background-cyan: var(--cyan-50); /* @kind color */
  --accent-background-light-blue: var(--light-blue-50); /* @kind color */
  --accent-background-lime: var(--lime-50); /* @kind color */
  --accent-background-pink: var(--pink-50); /* @kind color */
  --accent-background-purple: var(--purple-50); /* @kind color */
  --accent-background-red-orange: var(--red-orange-50); /* @kind color */
  --accent-background-violet-2: var(--violet-50-2); /* @kind color */
  --accent-background-violet: var(--violet-50); /* @kind color */
  --accent-cyan: var(--cyan-50-2); /* @kind color */
  --accent-foreground-blue: var(--blue-45); /* @kind color */
  --accent-foreground-cyan-2: var(--cyan-40-2); /* @kind color */
  --accent-foreground-cyan: var(--cyan-40); /* @kind color */
  --accent-foreground-green: var(--green-40); /* @kind color */
  --accent-foreground-light-blue: var(--light-blue-40); /* @kind color */
  --accent-foreground-lime: var(--lime-37); /* @kind color */
  --accent-foreground-orange: var(--orange-39); /* @kind color */
  --accent-foreground-pink: var(--pink-46); /* @kind color */
  --accent-foreground-purple: var(--purple-40); /* @kind color */
  --accent-foreground-red-orange: var(--red-orange-48); /* @kind color */
  --accent-foreground-red: var(--red-40); /* @kind color */
  --accent-foreground-violet: var(--violet-45); /* @kind color */
  --accent-violet: var(--violet-50-2); /* @kind color */
  --background-elevated-alternative: var(--cool-neutral-99-2); /* @kind color */
  --background-elevated-normal-2: var(--common-100); /* @kind color */
  --background-elevated-normal: var(--common-100-2); /* @kind color */
  --background-normal-alternative-2: var(--cool-neutral-99); /* @kind color */
  --background-normal-alternative-3: var(--cool-neutral-99); /* @kind color */
  --background-normal-alternative: var(--cool-neutral-99-2); /* @kind color */
  --background-normal-normal-2: rgb(255,255,255); /* @kind color */
  --background-normal-normal-3: var(--common-100); /* @kind color */
  --background-normal-normal-4: var(--common-100-2); /* @kind color */
  --background-normal-normal-5: var(--common-100); /* @kind color */
  --background-normal-normal: rgb(255,255,255); /* @kind color */
  --background-transparent-alternative-2: rgba(255,255,255,0.28); /* @kind color */
  --background-transparent-alternative: rgba(255,255,255,0.28); /* @kind color */
  --background-transparent-normal-2: rgba(255,255,255,0.08); /* @kind color */
  --background-transparent-normal: rgba(255,255,255,0.08); /* @kind color */
  --bg-context: "Bright"; /* @kind other */
  --blue-0-2: var(--common-0-3); /* @kind color */
  --blue-0: var(--common-0-2); /* @kind color */
  --blue-100-2: var(--common-100-3); /* @kind color */
  --blue-100: var(--common-100-2); /* @kind color */
  --blue-10: rgb(0,21,54); /* @kind color */
  --blue-20: rgb(0,41,102); /* @kind color */
  --blue-30: rgb(0,62,156); /* @kind color */
  --blue-40: rgb(0,84,209); /* @kind color */
  --blue-45: rgb(0,94,235); /* @kind color */
  --blue-50-2: rgb(0,102,255); /* @kind color */
  --blue-50: rgb(0,102,255); /* @kind color */
  --blue-55: rgb(26,117,255); /* @kind color */
  --blue-60-2: rgb(51,133,255); /* @kind color */
  --blue-60: rgb(51,133,255); /* @kind color */
  --blue-65: rgb(79,149,255); /* @kind color */
  --blue-70: rgb(105,165,255); /* @kind color */
  --blue-80: rgb(158,197,255); /* @kind color */
  --blue-90: rgb(201,222,254); /* @kind color */
  --blue-95-2: rgb(234,242,254); /* @kind color */
  --blue-95: rgb(234,242,254); /* @kind color */
  --blue-99: rgb(247,251,255); /* @kind color */
  --common-0-2: rgb(0,0,0); /* @kind color */
  --common-0-3: rgb(0,0,0); /* @kind color */
  --common-0: rgb(0,0,0); /* @kind color */
  --common-100-2: rgb(255,255,255); /* @kind color */
  --common-100-3: rgb(255,255,255); /* @kind color */
  --common-100-4: rgb(255,255,255); /* @kind color */
  --common-100: rgb(255,255,255); /* @kind color */
  --cool-neutral-0-2: var(--common-0-3); /* @kind color */
  --cool-neutral-0: var(--common-0-2); /* @kind color */
  --cool-neutral-10-2: rgb(23,23,25); /* @kind color */
  --cool-neutral-100-2: var(--common-100-3); /* @kind color */
  --cool-neutral-100: var(--common-100-2); /* @kind color */
  --cool-neutral-10: rgb(23,23,25); /* @kind color */
  --cool-neutral-15-2: rgb(27,28,30); /* @kind color */
  --cool-neutral-15: rgb(27,28,30); /* @kind color */
  --cool-neutral-17-2: rgb(33,34,37); /* @kind color */
  --cool-neutral-17-3: rgb(33,34,37); /* @kind color */
  --cool-neutral-17: rgb(33,34,37); /* @kind color */
  --cool-neutral-20: rgb(41,42,45); /* @kind color */
  --cool-neutral-22-2: rgb(46,47,51); /* @kind color */
  --cool-neutral-22: rgb(46,47,51); /* @kind color */
  --cool-neutral-23: rgb(51,52,56); /* @kind color */
  --cool-neutral-25-2: rgb(55,56,60); /* @kind color */
  --cool-neutral-25: rgb(55,56,60); /* @kind color */
  --cool-neutral-30-2: rgb(70,71,76); /* @kind color */
  --cool-neutral-30: rgb(70,71,76); /* @kind color */
  --cool-neutral-40-2: rgb(90,92,99); /* @kind color */
  --cool-neutral-40-3: rgb(90,92,99); /* @kind color */
  --cool-neutral-40: rgb(90,92,99); /* @kind color */
  --cool-neutral-5-2: rgb(15,15,16); /* @kind color */
  --cool-neutral-50: rgb(112,115,124); /* @kind color */
  --cool-neutral-5: rgb(15,15,16); /* @kind color */
  --cool-neutral-60: rgb(135,138,147); /* @kind color */
  --cool-neutral-70-2: rgb(152,155,162); /* @kind color */
  --cool-neutral-70-3: rgb(152,155,162); /* @kind color */
  --cool-neutral-70: rgb(152,155,162); /* @kind color */
  --cool-neutral-7: rgb(20,20,21); /* @kind color */
  --cool-neutral-80: rgb(174,176,182); /* @kind color */
  --cool-neutral-90: rgb(194,196,200); /* @kind color */
  --cool-neutral-95-2: rgb(219,220,223); /* @kind color */
  --cool-neutral-95: rgb(219,220,223); /* @kind color */
  --cool-neutral-96-2: rgb(225,226,228); /* @kind color */
  --cool-neutral-96: rgb(225,226,228); /* @kind color */
  --cool-neutral-97: rgb(234,235,236); /* @kind color */
  --cool-neutral-98-2: rgb(244,244,245); /* @kind color */
  --cool-neutral-98: rgb(244,244,245); /* @kind color */
  --cool-neutral-99-2: rgb(247,247,248); /* @kind color */
  --cool-neutral-99: rgb(247,247,248); /* @kind color */
  --cyan-0-2: var(--common-0-3); /* @kind color */
  --cyan-0: var(--common-0-2); /* @kind color */
  --cyan-100-2: var(--common-100-3); /* @kind color */
  --cyan-100: var(--common-100-2); /* @kind color */
  --cyan-10: rgb(0,37,43); /* @kind color */
  --cyan-20: rgb(0,72,84); /* @kind color */
  --cyan-30: rgb(0,111,130); /* @kind color */
  --cyan-40-2: rgb(0,152,178); /* @kind color */
  --cyan-40: rgb(0,152,178); /* @kind color */
  --cyan-50-2: rgb(0,189,222); /* @kind color */
  --cyan-50-3: rgb(0,189,222); /* @kind color */
  --cyan-50: rgb(0,189,222); /* @kind color */
  --cyan-60-2: rgb(40,208,237); /* @kind color */
  --cyan-60: rgb(40,208,237); /* @kind color */
  --cyan-70: rgb(87,223,247); /* @kind color */
  --cyan-80: rgb(138,237,255); /* @kind color */
  --cyan-90: rgb(181,244,255); /* @kind color */
  --cyan-95: rgb(222,250,255); /* @kind color */
  --cyan-99: rgb(247,254,255); /* @kind color */
  --deprecated-platform-ios-navigation1-3: rgba(255,255,255,0.7); /* @kind color */
  --deprecated-platform-ios-navigation2-3: rgb(255,255,255); /* @kind color */
  --deprecated-platform-ios-navigation3-3: rgba(0,0,0,0); /* @kind color */
  --fill-alternative-2: rgba(112,115,124,0.05); /* @kind color */
  --fill-alternative-3: rgba(112,115,124,0.05); /* @kind color */
  --fill-alternative: rgba(112,115,124,0.05); /* @kind color */
  --fill-normal-2: rgba(112,115,124,0.08); /* @kind color */
  --fill-normal-3: rgba(112,115,124,0.08); /* @kind color */
  --fill-normal-4: rgba(112,115,124,0.08); /* @kind color */
  --fill-normal: rgba(112,115,124,0.08); /* @kind color */
  --fill-strong-2: rgba(112,115,124,0.16); /* @kind color */
  --fill-strong-3: rgba(112,115,124,0.16); /* @kind color */
  --fill-strong: rgba(112,115,124,0.16); /* @kind color */
  --green-0-2: var(--common-0-3); /* @kind color */
  --green-0: var(--common-0-2); /* @kind color */
  --green-100-2: var(--common-100-3); /* @kind color */
  --green-100: var(--common-100-2); /* @kind color */
  --green-10: rgb(0,36,12); /* @kind color */
  --green-20: rgb(0,69,23); /* @kind color */
  --green-30: rgb(0,110,37); /* @kind color */
  --green-40: rgb(0,150,50); /* @kind color */
  --green-50-2: rgb(0,191,64); /* @kind color */
  --green-50: rgb(0,191,64); /* @kind color */
  --green-60-2: rgb(30,212,90); /* @kind color */
  --green-60: rgb(30,212,90); /* @kind color */
  --green-70: rgb(73,229,125); /* @kind color */
  --green-80: rgb(125,245,165); /* @kind color */
  --green-90: rgb(172,252,199); /* @kind color */
  --green-95-2: rgb(217,255,230); /* @kind color */
  --green-95: rgb(217,255,230); /* @kind color */
  --green-99: rgb(242,255,246); /* @kind color */
  --height-popup-max: 760; /* @kind spacing */
  --initial-black: rgb(0,0,0); /* @kind color */
  --initial-white: rgb(255,255,255); /* @kind color */
  --interaction-disable-2: var(--cool-neutral-98-2); /* @kind color */
  --interaction-disable-3: var(--cool-neutral-98-2); /* @kind color */
  --interaction-disable: var(--cool-neutral-98); /* @kind color */
  --interaction-inactive-2: var(--cool-neutral-70-3); /* @kind color */
  --interaction-inactive: var(--cool-neutral-70); /* @kind color */
  --inverse-background-2: var(--cool-neutral-15-2); /* @kind color */
  --inverse-background-3: var(--cool-neutral-15); /* @kind color */
  --inverse-background: var(--cool-neutral-15); /* @kind color */
  --inverse-label-2: var(--cool-neutral-99-2); /* @kind color */
  --inverse-label-3: var(--cool-neutral-99); /* @kind color */
  --inverse-label: var(--cool-neutral-99); /* @kind color */
  --inverse-primary: var(--blue-60); /* @kind color */
  --ios-accent-primary: rgb(0,136,255); /* @kind color */
  --ios-backgrounds-primary: rgb(255,255,255); /* @kind color */
  --ios-colors-blue: rgb(0,122,255); /* @kind color */
  --ios-colors-green: rgb(52,199,89); /* @kind color */
  --ios-colors-red: rgb(255,59,48); /* @kind color */
  --ios-fills-quaternary: rgba(116,116,128,0.08); /* @kind color */
  --ios-fills-secondary: rgba(120,120,128,0.16); /* @kind color */
  --ios-grays-white: rgb(255,255,255); /* @kind color */
  --ios-labels-primary: rgb(0,0,0); /* @kind color */
  --ios-labelsvibrant-primary1-2: rgb(0,0,0); /* @kind color */
  --ios-labelsvibrant-primary2-2: rgba(0,0,0,0); /* @kind color */
  --ios-labelsvibrant-tertiary1-2: rgba(0,0,0,0.25); /* @kind color */
  --ios-labelsvibrant-tertiary2-2: rgba(0,0,0,0); /* @kind color */
  --ios-materials-regular1-4-overlay: rgba(0,0,0,0); /* @kind color */
  --ios-materials-regular2-4-darken: rgba(0,0,0,0.03); /* @kind color */
  --ios-materials-regular3-4-colordodge: rgb(77,77,77); /* @kind color */
  --ios-materials-regular4-4: rgba(169,169,169,0.8); /* @kind color */
  --ios-other-navigation-label1-3-softlight: rgb(177,177,177); /* @kind color */
  --ios-other-navigation-label2-3: rgba(0,0,0,0.5); /* @kind color */
  --ios-other-navigation-label3-3-screen: rgba(0,0,0,0); /* @kind color */
  --ios-separators-nonopaque: rgba(60,60,67,0.36); /* @kind color */
  --label-alternative-2: rgba(55,56,60,0.61); /* @kind color */
  --label-alternative-3: rgba(55,56,60,0.61); /* @kind color */
  --label-alternative: rgba(55,56,60,0.61); /* @kind color */
  --label-assistive-2: rgba(55,56,60,0.28); /* @kind color */
  --label-assistive-3: rgba(55,56,60,0.28); /* @kind color */
  --label-assistive: rgba(55,56,60,0.28); /* @kind color */
  --label-disable-2: rgba(55,56,60,0.16); /* @kind color */
  --label-disable-3: rgba(55,56,60,0.16); /* @kind color */
  --label-disable: rgba(55,56,60,0.16); /* @kind color */
  --label-neutral-2: rgba(46,47,51,0.88); /* @kind color */
  --label-neutral-3: rgba(46,47,51,0.88); /* @kind color */
  --label-neutral: rgba(46,47,51,0.88); /* @kind color */
  --label-normal-2: rgb(23,23,23); /* @kind color */
  --label-normal-3: var(--cool-neutral-10); /* @kind color */
  --label-normal-4: var(--cool-neutral-10-2); /* @kind color */
  --label-normal-5: var(--cool-neutral-10); /* @kind color */
  --label-normal: rgb(23,23,23); /* @kind color */
  --label-strong-2: var(--common-0-2); /* @kind color */
  --label-strong-3: var(--common-0); /* @kind color */
  --label-strong: var(--common-0); /* @kind color */
  --labels-vibrant-controls-primary: rgb(64,64,64); /* @kind color */
  --light-blue-0-2: var(--common-0-3); /* @kind color */
  --light-blue-0: var(--common-0-2); /* @kind color */
  --light-blue-100-2: var(--common-100-3); /* @kind color */
  --light-blue-100: var(--common-100-2); /* @kind color */
  --light-blue-10: rgb(0,33,48); /* @kind color */
  --light-blue-20: rgb(0,66,97); /* @kind color */
  --light-blue-30: rgb(0,103,150); /* @kind color */
  --light-blue-40: rgb(0,141,207); /* @kind color */
  --light-blue-50: rgb(0,174,255); /* @kind color */
  --light-blue-60: rgb(61,194,255); /* @kind color */
  --light-blue-70: rgb(112,210,255); /* @kind color */
  --light-blue-80: rgb(161,225,255); /* @kind color */
  --light-blue-90: rgb(196,236,254); /* @kind color */
  --light-blue-95: rgb(229,246,254); /* @kind color */
  --light-blue-99: rgb(247,253,255); /* @kind color */
  --lime-0-2: var(--common-0-3); /* @kind color */
  --lime-0: var(--common-0-2); /* @kind color */
  --lime-100-2: var(--common-100-3); /* @kind color */
  --lime-100: var(--common-100-2); /* @kind color */
  --lime-10: rgb(17,41,0); /* @kind color */
  --lime-20: rgb(34,82,0); /* @kind color */
  --lime-30: rgb(52,125,0); /* @kind color */
  --lime-37: rgb(66,158,0); /* @kind color */
  --lime-40: rgb(72,173,0); /* @kind color */
  --lime-50: rgb(88,207,4); /* @kind color */
  --lime-60: rgb(107,224,22); /* @kind color */
  --lime-70: rgb(136,240,62); /* @kind color */
  --lime-80: rgb(174,247,121); /* @kind color */
  --lime-90: rgb(204,252,169); /* @kind color */
  --lime-95: rgb(230,255,212); /* @kind color */
  --lime-99: rgb(248,255,242); /* @kind color */
  --line-normal-alternative-2: rgba(112,115,124,0.08); /* @kind color */
  --line-normal-alternative-3: rgba(112,115,124,0.08); /* @kind color */
  --line-normal-alternative: rgba(112,115,124,0.08); /* @kind color */
  --line-normal-neutral-2: rgba(112,115,124,0.16); /* @kind color */
  --line-normal-neutral-3: rgba(112,115,124,0.16); /* @kind color */
  --line-normal-neutral: rgba(112,115,124,0.16); /* @kind color */
  --line-normal-normal-2: rgba(112,115,124,0.22); /* @kind color */
  --line-normal-normal-3: rgba(112,115,124,0.22); /* @kind color */
  --line-normal-normal: rgba(112,115,124,0.22); /* @kind color */
  --line-normal-strong-2: rgba(112,115,124,0.52); /* @kind color */
  --line-normal-strong: rgba(112,115,124,0.52); /* @kind color */
  --line-solid-alternative-2: var(--cool-neutral-98-2); /* @kind color */
  --line-solid-alternative: var(--cool-neutral-98); /* @kind color */
  --line-solid-neutral: var(--cool-neutral-97); /* @kind color */
  --line-solid-normal-2: var(--cool-neutral-96-2); /* @kind color */
  --line-solid-normal: var(--cool-neutral-96); /* @kind color */
  --line-solid-strong: var(--cool-neutral-80); /* @kind color */
  --macos-backgrounds-primary: rgb(255,255,255); /* @kind color */
  --macos-control-bar-title: rgba(250,250,250,0.8); /* @kind color */
  --macos-fills-virant-primary1-2: rgb(217,217,217); /* @kind color */
  --macos-fills-virant-primary2-2: rgba(0,0,0,0); /* @kind color */
  --macos-separators-vibrant1-2: rgba(0,0,0,0.1); /* @kind color */
  --macos-separators-vibrant2-2: rgba(0,0,0,0); /* @kind color */
  --macos-text-secondary: rgba(0,0,0,0.5); /* @kind color */
  --macos-text-tertiary: rgba(0,0,0,0.25); /* @kind color */
  --macos-textvibrant-secondary1-2: rgb(128,128,128); /* @kind color */
  --macos-textvibrant-secondary2-2: rgba(0,0,0,0); /* @kind color */
  --macos-textvibrant-tertiary1-2: rgb(191,191,191); /* @kind color */
  --macos-textvibrant-tertiary2-2: rgba(0,0,0,0); /* @kind color */
  --margin-action-contents-bottom: 4; /* @kind spacing */
  --margin-action-normal-horizontal: 20; /* @kind spacing */
  --margin-action-normal-vertical: 20; /* @kind spacing */
  --margin-content-content: 20; /* @kind spacing */
  --margin-navigation-horizontal: 16; /* @kind spacing */
  --margin-navigation-normal: 20; /* @kind spacing */
  --margin-navigation-text: 4; /* @kind spacing */
  --margin-navigation-tool-tab: 12; /* @kind spacing */
  --material-background-onbackground: rgb(27,27,31); /* @kind color */
  --material-dimmer: rgba(23,23,25,0.52); /* @kind color */
  --material-outline-outline: rgb(116,117,127); /* @kind color */
  --mode-2: "Light"; /* @kind other */
  --mode: "Light"; /* @kind other */
  --neutral-0-2: var(--common-0-3); /* @kind color */
  --neutral-0: var(--common-0-2); /* @kind color */
  --neutral-100-2: var(--common-100-3); /* @kind color */
  --neutral-100: var(--common-100-2); /* @kind color */
  --neutral-10: rgb(23,23,23); /* @kind color */
  --neutral-15: rgb(28,28,28); /* @kind color */
  --neutral-20: rgb(42,42,42); /* @kind color */
  --neutral-22: rgb(48,48,48); /* @kind color */
  --neutral-30: rgb(71,71,71); /* @kind color */
  --neutral-40: rgb(92,92,92); /* @kind color */
  --neutral-50: rgb(115,115,115); /* @kind color */
  --neutral-5: rgb(15,15,15); /* @kind color */
  --neutral-60: rgb(138,138,138); /* @kind color */
  --neutral-70: rgb(155,155,155); /* @kind color */
  --neutral-80: rgb(176,176,176); /* @kind color */
  --neutral-90: rgb(196,196,196); /* @kind color */
  --neutral-95: rgb(220,220,220); /* @kind color */
  --neutral-99: rgb(247,247,247); /* @kind color */
  --opacity-0-2: 0; /* @kind other */
  --opacity-0: 0; /* @kind other */
  --opacity-100-2: 100; /* @kind other */
  --opacity-100-3: 100; /* @kind other */
  --opacity-100: 100; /* @kind other */
  --opacity-12-2: 12; /* @kind other */
  --opacity-12-3: 12; /* @kind other */
  --opacity-12: 12; /* @kind other */
  --opacity-16-2: 16; /* @kind other */
  --opacity-16-3: 16; /* @kind other */
  --opacity-16: 16; /* @kind other */
  --opacity-22-2: 22; /* @kind other */
  --opacity-22-3: 22; /* @kind other */
  --opacity-22: 22; /* @kind other */
  --opacity-28-2: 28; /* @kind other */
  --opacity-28-3: 28; /* @kind other */
  --opacity-28: 28; /* @kind other */
  --opacity-35-2: 35; /* @kind other */
  --opacity-35-3: 35; /* @kind other */
  --opacity-35: 35; /* @kind other */
  --opacity-43-2: 43; /* @kind other */
  --opacity-43-3: 43; /* @kind other */
  --opacity-43: 43; /* @kind other */
  --opacity-5-2: 5; /* @kind other */
  --opacity-5-3: 5; /* @kind other */
  --opacity-52-2: 52; /* @kind other */
  --opacity-52-3: 52; /* @kind other */
  --opacity-52: 52; /* @kind other */
  --opacity-5: 5; /* @kind other */
  --opacity-61-2: 61; /* @kind other */
  --opacity-61-3: 61; /* @kind other */
  --opacity-61: 61; /* @kind other */
  --opacity-74-2: 74; /* @kind other */
  --opacity-74-3: 74; /* @kind other */
  --opacity-74: 74; /* @kind other */
  --opacity-8-2: 8; /* @kind other */
  --opacity-8-3: 8; /* @kind other */
  --opacity-88-2: 88; /* @kind other */
  --opacity-88-3: 88; /* @kind other */
  --opacity-88: 88; /* @kind other */
  --opacity-8: 8; /* @kind other */
  --opacity-97-2: 97; /* @kind other */
  --opacity-97-3: 97; /* @kind other */
  --opacity-97: 97; /* @kind other */
  --orange-0-2: var(--common-0-3); /* @kind color */
  --orange-0: var(--common-0-2); /* @kind color */
  --orange-100-2: var(--common-100-3); /* @kind color */
  --orange-100: var(--common-100-2); /* @kind color */
  --orange-10: rgb(54,30,0); /* @kind color */
  --orange-20: rgb(102,58,0); /* @kind color */
  --orange-30: rgb(156,88,0); /* @kind color */
  --orange-39: rgb(209,118,0); /* @kind color */
  --orange-40: rgb(212,120,0); /* @kind color */
  --orange-50: rgb(255,146,0); /* @kind color */
  --orange-60: rgb(255,169,56); /* @kind color */
  --orange-70: rgb(255,192,110); /* @kind color */
  --orange-80: rgb(255,212,156); /* @kind color */
  --orange-90: rgb(254,230,198); /* @kind color */
  --orange-95: rgb(254,244,230); /* @kind color */
  --orange-99: rgb(255,252,247); /* @kind color */
  --padding-horizontal: 16; /* @kind spacing */
  --padding-vertical: 4; /* @kind spacing */
  --pink-0-2: var(--common-0-3); /* @kind color */
  --pink-0: var(--common-0-2); /* @kind color */
  --pink-100-2: var(--common-100-3); /* @kind color */
  --pink-100: var(--common-100-2); /* @kind color */
  --pink-10: rgb(61,1,51); /* @kind color */
  --pink-20: rgb(115,5,96); /* @kind color */
  --pink-30: rgb(168,22,144); /* @kind color */
  --pink-40: rgb(211,49,184); /* @kind color */
  --pink-46: rgb(232,70,205); /* @kind color */
  --pink-50: rgb(245,83,218); /* @kind color */
  --pink-60: rgb(250,115,227); /* @kind color */
  --pink-70: rgb(255,148,237); /* @kind color */
  --pink-80: rgb(255,184,243); /* @kind color */
  --pink-90: rgb(254,211,247); /* @kind color */
  --pink-95: rgb(254,236,251); /* @kind color */
  --pink-99: rgb(255,250,254); /* @kind color */
  --primary-heavy: var(--blue-40); /* @kind color */
  --primary-normal-2: rgb(51,102,255); /* @kind color */
  --primary-normal-3: var(--blue-50); /* @kind color */
  --primary-normal-4: var(--blue-50-2); /* @kind color */
  --primary-normal-5: var(--blue-50-2); /* @kind color */
  --primary-normal: rgb(51,102,255); /* @kind color */
  --primary-strong: var(--blue-45); /* @kind color */
  --purple-0-2: var(--common-0-3); /* @kind color */
  --purple-0: var(--common-0-2); /* @kind color */
  --purple-100-2: var(--common-100-3); /* @kind color */
  --purple-100: var(--common-100-2); /* @kind color */
  --purple-10: rgb(41,2,71); /* @kind color */
  --purple-20: rgb(88,10,125); /* @kind color */
  --purple-30: rgb(134,28,184); /* @kind color */
  --purple-40: rgb(173,54,227); /* @kind color */
  --purple-50: rgb(203,89,255); /* @kind color */
  --purple-60: rgb(212,120,255); /* @kind color */
  --purple-70: rgb(222,150,255); /* @kind color */
  --purple-80: rgb(233,186,255); /* @kind color */
  --purple-90: rgb(242,214,255); /* @kind color */
  --purple-95: rgb(249,237,255); /* @kind color */
  --purple-99: rgb(254,251,255); /* @kind color */
  --radius-2: 14; /* @kind radius */
  --radius-3: 14; /* @kind radius */
  --radius: 12; /* @kind radius */
  --red-0-2: var(--common-0-3); /* @kind color */
  --red-0: var(--common-0-2); /* @kind color */
  --red-100-2: var(--common-100-3); /* @kind color */
  --red-100: var(--common-100-2); /* @kind color */
  --red-10: rgb(59,1,1); /* @kind color */
  --red-20: rgb(115,3,3); /* @kind color */
  --red-30: rgb(176,12,12); /* @kind color */
  --red-40: rgb(229,34,34); /* @kind color */
  --red-50-2: rgb(255,66,66); /* @kind color */
  --red-50: rgb(255,66,66); /* @kind color */
  --red-60-2: rgb(255,99,99); /* @kind color */
  --red-60: rgb(255,99,99); /* @kind color */
  --red-70: rgb(255,140,140); /* @kind color */
  --red-80: rgb(255,181,181); /* @kind color */
  --red-90: rgb(254,213,213); /* @kind color */
  --red-95-2: rgb(254,236,236); /* @kind color */
  --red-95: rgb(254,236,236); /* @kind color */
  --red-99: rgb(255,250,250); /* @kind color */
  --red-orange-0-2: var(--common-0-3); /* @kind color */
  --red-orange-0: var(--common-0-2); /* @kind color */
  --red-orange-100-2: var(--common-100-3); /* @kind color */
  --red-orange-100: var(--common-100-2); /* @kind color */
  --red-orange-10: rgb(41,15,0); /* @kind color */
  --red-orange-20: rgb(89,33,0); /* @kind color */
  --red-orange-30: rgb(145,53,0); /* @kind color */
  --red-orange-40: rgb(201,74,0); /* @kind color */
  --red-orange-48: rgb(245,90,0); /* @kind color */
  --red-orange-50: rgb(255,94,0); /* @kind color */
  --red-orange-60: rgb(255,123,46); /* @kind color */
  --red-orange-70: rgb(255,155,97); /* @kind color */
  --red-orange-80: rgb(255,189,150); /* @kind color */
  --red-orange-90: rgb(254,217,196); /* @kind color */
  --red-orange-95-2: rgb(254,238,229); /* @kind color */
  --red-orange-95: rgb(254,238,229); /* @kind color */
  --red-orange-99: rgb(255,250,247); /* @kind color */
  --static-black-2: var(--common-0-2); /* @kind color */
  --static-black-3: var(--common-0); /* @kind color */
  --static-black: var(--common-0); /* @kind color */
  --static-white-2: var(--common-100); /* @kind color */
  --static-white-3: var(--common-100-2); /* @kind color */
  --static-white-4: var(--common-100); /* @kind color */
  --static-white-5: rgb(255,255,255); /* @kind color */
  --static-white: rgb(255,255,255); /* @kind color */
  --status-cautionary: var(--orange-50); /* @kind color */
  --status-negative-2: var(--red-50-2); /* @kind color */
  --status-negative-3: var(--red-50-2); /* @kind color */
  --status-negative: var(--red-50); /* @kind color */
  --status-positive-2: var(--green-50-2); /* @kind color */
  --status-positive-3: var(--green-50-2); /* @kind color */
  --status-positive: var(--green-50); /* @kind color */
  --value-margin-platform-2: 20; /* @kind spacing */
  --value-margin-platform: 20; /* @kind spacing */
  --value-padding-card-tiny: 4; /* @kind spacing */
  --value-space-gap-normal: 16; /* @kind spacing */
  --value-width-viewport-lg: 1100; /* @kind spacing */
  --value-width-viewport-xl: 1440; /* @kind spacing */
  --variant-platform: "Mobile"; /* @kind other */
  --violet-0-2: var(--common-0-3); /* @kind color */
  --violet-0: var(--common-0-2); /* @kind color */
  --violet-100-2: var(--common-100-3); /* @kind color */
  --violet-100: var(--common-100-2); /* @kind color */
  --violet-10: rgb(17,2,77); /* @kind color */
  --violet-20: rgb(35,9,143); /* @kind color */
  --violet-30: rgb(58,22,201); /* @kind color */
  --violet-40: rgb(79,41,229); /* @kind color */
  --violet-45: rgb(91,55,237); /* @kind color */
  --violet-50-2: rgb(101,65,242); /* @kind color */
  --violet-50: rgb(101,65,242); /* @kind color */
  --violet-60-2: rgb(125,94,247); /* @kind color */
  --violet-60: rgb(125,94,247); /* @kind color */
  --violet-70: rgb(158,134,252); /* @kind color */
  --violet-80: rgb(192,176,255); /* @kind color */
  --violet-90: rgb(219,211,254); /* @kind color */
  --violet-95-2: rgb(240,236,254); /* @kind color */
  --violet-95: rgb(240,236,254); /* @kind color */
  --violet-99: rgb(251,250,255); /* @kind color */
  --width-max: 1060; /* @kind spacing */
  --width-min: 320; /* @kind spacing */
  --width-normal: 400; /* @kind spacing */
}

:root[data-theme="dark"], .dark {
  --accent-background-cyan-2: var(--cyan-60-2); /* @kind color */
  --accent-background-cyan: var(--cyan-60); /* @kind color */
  --accent-background-light-blue: var(--light-blue-60); /* @kind color */
  --accent-background-lime: var(--lime-60); /* @kind color */
  --accent-background-pink: var(--pink-60); /* @kind color */
  --accent-background-purple: var(--purple-60); /* @kind color */
  --accent-background-red-orange: var(--red-orange-60); /* @kind color */
  --accent-background-violet-2: var(--violet-60-2); /* @kind color */
  --accent-background-violet: var(--violet-60); /* @kind color */
  --accent-cyan: var(--cyan-60-2); /* @kind color */
  --accent-foreground-blue: var(--blue-65); /* @kind color */
  --accent-foreground-cyan-2: var(--cyan-50-2); /* @kind color */
  --accent-foreground-cyan: var(--cyan-50); /* @kind color */
  --accent-foreground-green: var(--green-60); /* @kind color */
  --accent-foreground-light-blue: var(--light-blue-50); /* @kind color */
  --accent-foreground-lime: var(--lime-50); /* @kind color */
  --accent-foreground-orange: var(--orange-50); /* @kind color */
  --accent-foreground-pink: var(--pink-60); /* @kind color */
  --accent-foreground-purple: var(--purple-60); /* @kind color */
  --accent-foreground-red-orange: var(--red-orange-60); /* @kind color */
  --accent-foreground-red: var(--red-60); /* @kind color */
  --accent-foreground-violet: var(--violet-70); /* @kind color */
  --accent-violet: var(--violet-60-2); /* @kind color */
  --background-elevated-alternative: var(--cool-neutral-7); /* @kind color */
  --background-elevated-normal-2: var(--cool-neutral-17-2); /* @kind color */
  --background-elevated-normal: var(--cool-neutral-17); /* @kind color */
  --background-normal-alternative-2: var(--cool-neutral-5-2); /* @kind color */
  --background-normal-alternative-3: var(--cool-neutral-5-2); /* @kind color */
  --background-normal-alternative: var(--cool-neutral-5); /* @kind color */
  --background-normal-normal-2: rgb(27,28,30); /* @kind color */
  --background-normal-normal-3: var(--cool-neutral-15); /* @kind color */
  --background-normal-normal-4: var(--cool-neutral-15-2); /* @kind color */
  --background-normal-normal-5: var(--cool-neutral-15); /* @kind color */
  --background-normal-normal: rgb(27,28,30); /* @kind color */
  --background-transparent-alternative-2: rgba(33,34,37,0.61); /* @kind color */
  --background-transparent-alternative: rgba(33,34,37,0.61); /* @kind color */
  --background-transparent-normal-2: rgba(33,34,37,0.61); /* @kind color */
  --background-transparent-normal: rgba(33,34,37,0.61); /* @kind color */
  --deprecated-platform-ios-navigation1-3: rgba(255,255,255,0.07); /* @kind color */
  --deprecated-platform-ios-navigation2-3: rgba(255,255,255,0.35); /* @kind color */
  --deprecated-platform-ios-navigation3-3: rgba(0,0,0,0.7); /* @kind color */
  --fill-alternative-2: rgba(112,115,124,0.12); /* @kind color */
  --fill-alternative-3: rgba(112,115,124,0.12); /* @kind color */
  --fill-alternative: rgba(112,115,124,0.12); /* @kind color */
  --fill-normal-2: rgba(112,115,124,0.22); /* @kind color */
  --fill-normal-3: rgba(112,115,124,0.22); /* @kind color */
  --fill-normal-4: rgba(112,115,124,0.22); /* @kind color */
  --fill-normal: rgba(112,115,124,0.22); /* @kind color */
  --fill-strong-2: rgba(112,115,124,0.28); /* @kind color */
  --fill-strong-3: rgba(112,115,124,0.28); /* @kind color */
  --fill-strong: rgba(112,115,124,0.28); /* @kind color */
  --initial-black: rgb(0,0,0); /* @kind color */
  --initial-white: rgb(255,255,255); /* @kind color */
  --interaction-disable-2: var(--cool-neutral-22-2); /* @kind color */
  --interaction-disable-3: var(--cool-neutral-22-2); /* @kind color */
  --interaction-disable: var(--cool-neutral-22); /* @kind color */
  --interaction-inactive-2: var(--cool-neutral-40-3); /* @kind color */
  --interaction-inactive: var(--cool-neutral-40); /* @kind color */
  --inverse-background-2: var(--common-100-2); /* @kind color */
  --inverse-background-3: var(--common-100); /* @kind color */
  --inverse-background: var(--common-100); /* @kind color */
  --inverse-label-2: var(--cool-neutral-10-2); /* @kind color */
  --inverse-label-3: var(--cool-neutral-10); /* @kind color */
  --inverse-label: var(--cool-neutral-10); /* @kind color */
  --inverse-primary: var(--blue-50); /* @kind color */
  --ios-accent-primary: rgb(0,145,255); /* @kind color */
  --ios-backgrounds-primary: rgb(0,0,0); /* @kind color */
  --ios-colors-blue: rgb(10,132,255); /* @kind color */
  --ios-colors-green: rgb(48,209,88); /* @kind color */
  --ios-colors-red: rgb(255,69,58); /* @kind color */
  --ios-fills-quaternary: rgba(116,116,128,0.18); /* @kind color */
  --ios-fills-secondary: rgba(120,120,128,0.32); /* @kind color */
  --ios-grays-white: rgb(255,255,255); /* @kind color */
  --ios-labels-primary: rgb(255,255,255); /* @kind color */
  --ios-labelsvibrant-primary1-2: rgba(0,0,0,0); /* @kind color */
  --ios-labelsvibrant-primary2-2: rgb(255,255,255); /* @kind color */
  --ios-labelsvibrant-tertiary1-2: rgba(0,0,0,0); /* @kind color */
  --ios-labelsvibrant-tertiary2-2: rgba(255,255,255,0.25); /* @kind color */
  --ios-materials-regular1-4-overlay: rgb(95,95,95); /* @kind color */
  --ios-materials-regular2-4-darken: rgba(0,0,0,0); /* @kind color */
  --ios-materials-regular3-4-colordodge: rgba(0,0,0,0); /* @kind color */
  --ios-materials-regular4-4: rgba(59,59,59,0.7); /* @kind color */
  --ios-other-navigation-label1-3-softlight: rgba(0,0,0,0); /* @kind color */
  --ios-other-navigation-label2-3: rgba(127,127,127,0.85); /* @kind color */
  --ios-other-navigation-label3-3-screen: rgb(127,127,127); /* @kind color */
  --ios-separators-nonopaque: rgba(84,84,88,0.65); /* @kind color */
  --label-alternative-2: rgba(174,176,182,0.61); /* @kind color */
  --label-alternative-3: rgba(174,176,182,0.61); /* @kind color */
  --label-alternative: rgba(174,176,182,0.61); /* @kind color */
  --label-assistive-2: rgba(174,176,182,0.28); /* @kind color */
  --label-assistive-3: rgba(174,176,182,0.28); /* @kind color */
  --label-assistive: rgba(174,176,182,0.28); /* @kind color */
  --label-disable-2: rgba(152,155,162,0.16); /* @kind color */
  --label-disable-3: rgba(152,155,162,0.16); /* @kind color */
  --label-disable: rgba(152,155,162,0.16); /* @kind color */
  --label-neutral-2: rgba(194,196,200,0.88); /* @kind color */
  --label-neutral-3: rgba(194,196,200,0.88); /* @kind color */
  --label-neutral: rgba(194,196,200,0.88); /* @kind color */
  --label-normal-2: rgb(247,247,247); /* @kind color */
  --label-normal-3: var(--cool-neutral-99); /* @kind color */
  --label-normal-4: var(--cool-neutral-99-2); /* @kind color */
  --label-normal-5: var(--cool-neutral-99); /* @kind color */
  --label-normal: rgb(247,247,247); /* @kind color */
  --label-strong-2: var(--common-100-2); /* @kind color */
  --label-strong-3: var(--common-100); /* @kind color */
  --label-strong: var(--common-100); /* @kind color */
  --labels-vibrant-controls-primary: rgb(191,191,191); /* @kind color */
  --labels-vibrant-controls-primary: rgb(191,191,191); /* @kind color */
  --line-normal-alternative-2: rgba(112,115,124,0.22); /* @kind color */
  --line-normal-alternative-3: rgba(112,115,124,0.22); /* @kind color */
  --line-normal-alternative: rgba(112,115,124,0.22); /* @kind color */
  --line-normal-neutral-2: rgba(112,115,124,0.28); /* @kind color */
  --line-normal-neutral-3: rgba(112,115,124,0.28); /* @kind color */
  --line-normal-neutral: rgba(112,115,124,0.28); /* @kind color */
  --line-normal-normal-2: rgba(112,115,124,0.32); /* @kind color */
  --line-normal-normal-3: rgba(112,115,124,0.32); /* @kind color */
  --line-normal-normal: rgba(112,115,124,0.32); /* @kind color */
  --line-normal-strong-2: rgba(194,196,200,0.52); /* @kind color */
  --line-normal-strong: rgba(194,196,200,0.52); /* @kind color */
  --line-solid-alternative-2: var(--cool-neutral-22-2); /* @kind color */
  --line-solid-alternative: var(--cool-neutral-22); /* @kind color */
  --line-solid-neutral: var(--cool-neutral-23); /* @kind color */
  --line-solid-normal-2: var(--cool-neutral-25-2); /* @kind color */
  --line-solid-normal: var(--cool-neutral-25); /* @kind color */
  --line-solid-strong: var(--cool-neutral-50); /* @kind color */
  --macos-backgrounds-primary: rgb(0,0,0); /* @kind color */
  --macos-control-bar-title: rgba(60,60,60,0.8); /* @kind color */
  --macos-fills-virant-primary1-2: rgba(0,0,0,0); /* @kind color */
  --macos-fills-virant-primary2-2: rgb(36,36,36); /* @kind color */
  --macos-separators-vibrant1-2: rgba(0,0,0,0); /* @kind color */
  --macos-separators-vibrant2-2: rgba(255,255,255,0.1); /* @kind color */
  --macos-text-secondary: rgba(255,255,255,0.55); /* @kind color */
  --macos-text-tertiary: rgba(255,255,255,0.25); /* @kind color */
  --macos-textvibrant-secondary1-2: rgba(0,0,0,0); /* @kind color */
  --macos-textvibrant-secondary2-2: rgb(124,124,124); /* @kind color */
  --macos-textvibrant-tertiary1-2: rgba(0,0,0,0); /* @kind color */
  --macos-textvibrant-tertiary2-2: rgb(65,65,65); /* @kind color */
  --material-background-onbackground: rgb(228,226,230); /* @kind color */
  --material-dimmer: rgba(23,23,25,0.74); /* @kind color */
  --material-outline-outline: rgb(143,144,154); /* @kind color */
  --mode-2: "Dark"; /* @kind other */
  --mode-2: "IC - Dark"; /* @kind other */
  --mode: "Dark"; /* @kind other */
  --primary-heavy: var(--blue-50); /* @kind color */
  --primary-normal-2: rgb(91,132,255); /* @kind color */
  --primary-normal-3: var(--blue-60); /* @kind color */
  --primary-normal-4: var(--blue-60-2); /* @kind color */
  --primary-normal-5: var(--blue-60-2); /* @kind color */
  --primary-normal: rgb(91,132,255); /* @kind color */
  --primary-strong: var(--blue-55); /* @kind color */
  --static-black-2: var(--common-0-2); /* @kind color */
  --static-black-3: var(--common-0); /* @kind color */
  --static-black: var(--common-0); /* @kind color */
  --static-white-2: var(--common-100); /* @kind color */
  --static-white-3: var(--common-100-2); /* @kind color */
  --static-white-4: var(--common-100); /* @kind color */
  --static-white-5: rgb(255,255,255); /* @kind color */
  --static-white: rgb(255,255,255); /* @kind color */
  --status-cautionary: var(--orange-60); /* @kind color */
  --status-negative-2: var(--red-60-2); /* @kind color */
  --status-negative-3: var(--red-60-2); /* @kind color */
  --status-negative: var(--red-60); /* @kind color */
  --status-positive-2: var(--green-60-2); /* @kind color */
  --status-positive-3: var(--green-60-2); /* @kind color */
  --status-positive: var(--green-60); /* @kind color */
}

:root[data-mode="desktop"] {
  --value-margin-platform-2: 20; /* @kind spacing */
  --value-margin-platform: 20; /* @kind spacing */
  --value-padding-card-tiny: 6; /* @kind spacing */
  --value-space-gap-normal: 20; /* @kind spacing */
  --value-width-viewport-lg: 1100; /* @kind spacing */
  --value-width-viewport-xl: 1440; /* @kind spacing */
  --variant-platform: "Desktop"; /* @kind other */
}

:root[data-mode="small"] {
  --height-popup-max: 760; /* @kind spacing */
  --margin-action-contents-bottom: 4; /* @kind spacing */
  --margin-action-normal-horizontal: 16; /* @kind spacing */
  --margin-action-normal-vertical: 16; /* @kind spacing */
  --margin-content-content: 20; /* @kind spacing */
  --margin-navigation-horizontal: 16; /* @kind spacing */
  --margin-navigation-normal: 16; /* @kind spacing */
  --margin-navigation-text: 4; /* @kind spacing */
  --margin-navigation-tool-tab: 12; /* @kind spacing */
  --padding-horizontal: 12; /* @kind spacing */
  --padding-vertical: 4; /* @kind spacing */
  --radius-2: 12; /* @kind radius */
  --radius-3: 12; /* @kind radius */
  --radius: 12; /* @kind radius */
  --width-max: 1060; /* @kind spacing */
  --width-min: 320; /* @kind spacing */
  --width-normal: 360; /* @kind spacing */
}

:root[data-mode="large"] {
  --height-popup-max: 760; /* @kind spacing */
  --margin-action-contents-bottom: 0; /* @kind spacing */
  --margin-action-normal-horizontal: 24; /* @kind spacing */
  --margin-action-normal-vertical: 24; /* @kind spacing */
  --margin-content-content: 24; /* @kind spacing */
  --margin-navigation-horizontal: 20; /* @kind spacing */
  --margin-navigation-normal: 20; /* @kind spacing */
  --margin-navigation-text: 4; /* @kind spacing */
  --margin-navigation-tool-tab: 16; /* @kind spacing */
  --padding-horizontal: 20; /* @kind spacing */
  --padding-vertical: 4; /* @kind spacing */
  --radius-2: 16; /* @kind radius */
  --radius-3: 16; /* @kind radius */
  --radius: 20; /* @kind radius */
  --width-max: 1060; /* @kind spacing */
  --width-min: 320; /* @kind spacing */
  --width-normal: 480; /* @kind spacing */
}

:root[data-mode="xlarge"] {
  --height-popup-max: 760; /* @kind spacing */
  --margin-action-contents-bottom: 0; /* @kind spacing */
  --margin-action-normal-horizontal: 32; /* @kind spacing */
  --margin-action-normal-vertical: 24; /* @kind spacing */
  --margin-content-content: 32; /* @kind spacing */
  --margin-navigation-horizontal: 28; /* @kind spacing */
  --margin-navigation-normal: 24; /* @kind spacing */
  --margin-navigation-text: 4; /* @kind spacing */
  --margin-navigation-tool-tab: 20; /* @kind spacing */
  --padding-horizontal: 24; /* @kind spacing */
  --padding-vertical: 8; /* @kind spacing */
  --radius-2: 20; /* @kind radius */
  --radius-3: 20; /* @kind radius */
  --radius: 20; /* @kind radius */
  --width-max: 1060; /* @kind spacing */
  --width-min: 320; /* @kind spacing */
  --width-normal: 560; /* @kind spacing */
}

:root[data-mode="dim"] {
  --bg-context: "Dim"; /* @kind other */
}

:root[data-theme="light"], .light {
  --labels-vibrant-controls-primary: rgb(64,64,64); /* @kind color */
  --mode-2: "IC - Light"; /* @kind other */
}

/* ---- typography scale ---- */
/* Wanted Design System — Typography scale
   Source of truth: Figma "Typography" page specimen table.
   Family: Wanted Sans (var(--font-sans)). Weights: 700 Bold, 600 SemiBold,
   500 Medium, 400 Regular. Each role exposes size / line-height / letter-spacing.
   Korean-optimized line-heights and tight tracking on large display sizes. */

:root {
  /* Weights */
  --weight-bold: 700;
  --weight-semibold: 600;
  --weight-medium: 500;
  --weight-regular: 400;

  /* ---- Font sizes ---- */
  --font-size-display1: 56px;
  --font-size-display2: 40px;
  --font-size-display3: 36px;
  --font-size-title1: 32px;
  --font-size-title2: 28px;
  --font-size-title3: 24px;
  --font-size-heading1: 22px;
  --font-size-heading2: 20px;
  --font-size-headline1: 18px;
  --font-size-headline2: 17px;
  --font-size-body1: 16px;
  --font-size-body2: 15px;
  --font-size-label1: 14px;
  --font-size-label2: 13px;
  --font-size-caption1: 12px;
  --font-size-caption2: 11px;

  /* ---- Line heights (px) ---- */
  --line-height-display1: 72px;
  --line-height-display2: 52px;
  --line-height-display3: 48px;
  --line-height-title1: 44px;
  --line-height-title2: 38px;
  --line-height-title3: 32px;
  --line-height-heading1: 30px;
  --line-height-heading2: 28px;
  --line-height-headline1: 26px;
  --line-height-headline2: 24px;
  --line-height-body1-normal: 24px;
  --line-height-body1-reading: 26px;
  --line-height-body2-normal: 22px;
  --line-height-body2-reading: 24px;
  --line-height-label1-normal: 20px;
  --line-height-label1-reading: 22px;
  --line-height-label2: 18px;
  --line-height-caption1: 16px;
  --line-height-caption2: 14px;

  /* ---- Letter spacing (em) ---- */
  --tracking-display1: -0.032em;
  --tracking-display2: -0.0282em;
  --tracking-display3: -0.027em;
  --tracking-title1: -0.0253em;
  --tracking-title2: -0.0236em;
  --tracking-title3: -0.023em;
  --tracking-heading1: -0.0194em;
  --tracking-heading2: -0.012em;
  --tracking-headline1: -0.002em;
  --tracking-headline2: 0em;
  --tracking-body1: 0.0057em;
  --tracking-body2: 0.0096em;
  --tracking-label1: 0.0145em;
  --tracking-label2: 0.0194em;
  --tracking-caption1: 0.0252em;
  --tracking-caption2: 0.0311em;
}

/* ---- Type role utility classes ---- */
.wds-display1 { font: var(--weight-bold) var(--font-size-display1)/var(--line-height-display1) var(--font-sans); letter-spacing: var(--tracking-display1); }
.wds-display2 { font: var(--weight-bold) var(--font-size-display2)/var(--line-height-display2) var(--font-sans); letter-spacing: var(--tracking-display2); }
.wds-display3 { font: var(--weight-bold) var(--font-size-display3)/var(--line-height-display3) var(--font-sans); letter-spacing: var(--tracking-display3); }
.wds-title1 { font: var(--weight-bold) var(--font-size-title1)/var(--line-height-title1) var(--font-sans); letter-spacing: var(--tracking-title1); }
.wds-title2 { font: var(--weight-bold) var(--font-size-title2)/var(--line-height-title2) var(--font-sans); letter-spacing: var(--tracking-title2); }
.wds-title3 { font: var(--weight-bold) var(--font-size-title3)/var(--line-height-title3) var(--font-sans); letter-spacing: var(--tracking-title3); }
.wds-heading1 { font: var(--weight-bold) var(--font-size-heading1)/var(--line-height-heading1) var(--font-sans); letter-spacing: var(--tracking-heading1); }
.wds-heading2 { font: var(--weight-bold) var(--font-size-heading2)/var(--line-height-heading2) var(--font-sans); letter-spacing: var(--tracking-heading2); }
.wds-headline1 { font: var(--weight-semibold) var(--font-size-headline1)/var(--line-height-headline1) var(--font-sans); letter-spacing: var(--tracking-headline1); }
.wds-headline2 { font: var(--weight-semibold) var(--font-size-headline2)/var(--line-height-headline2) var(--font-sans); letter-spacing: var(--tracking-headline2); }
.wds-body1 { font: var(--weight-regular) var(--font-size-body1)/var(--line-height-body1-normal) var(--font-sans); letter-spacing: var(--tracking-body1); }
.wds-body1-reading { font: var(--weight-regular) var(--font-size-body1)/var(--line-height-body1-reading) var(--font-sans); letter-spacing: var(--tracking-body1); }
.wds-body2 { font: var(--weight-regular) var(--font-size-body2)/var(--line-height-body2-normal) var(--font-sans); letter-spacing: var(--tracking-body2); }
.wds-label1 { font: var(--weight-medium) var(--font-size-label1)/var(--line-height-label1-normal) var(--font-sans); letter-spacing: var(--tracking-label1); }
.wds-label2 { font: var(--weight-medium) var(--font-size-label2)/var(--line-height-label2) var(--font-sans); letter-spacing: var(--tracking-label2); }
.wds-caption1 { font: var(--weight-medium) var(--font-size-caption1)/var(--line-height-caption1) var(--font-sans); letter-spacing: var(--tracking-caption1); }
.wds-caption2 { font: var(--weight-medium) var(--font-size-caption2)/var(--line-height-caption2) var(--font-sans); letter-spacing: var(--tracking-caption2); }

/* ---- spacing + shadow + ease ---- */
/* Wanted Design System — Spacing, radius, elevation
   Spacing follows a 4px base grid (Wanted/Toss convention). Radius and
   shadow tokens distilled from the Modal/Frame/Component Figma collections. */

:root {
  /* ---- Spacing scale (4px grid) ---- */
  --space-0: 0px;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-10: 20px;
  --space-12: 24px;
  --space-14: 28px;
  --space-16: 32px;
  --space-20: 40px;
  --space-24: 48px;
  --space-28: 56px;
  --space-32: 64px;

  /* Semantic spacing */
  --gap-component: 16px;   /* default gap between elements in a group */
  --gap-content: 20px;     /* gap between content blocks */
  --margin-screen: 20px;   /* default screen horizontal margin (mobile) */

  /* ---- Corner radius ---- */
  --radius-2xs: 4px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;   /* Frame default radius */
  --radius-xl: 14px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;  /* Modal/large radius */
  --radius-circle: 999px;

  /* ---- Elevation / shadow ---- */
  /* Wanted shadows are soft, low-opacity neutral blacks — never colored. */
  --shadow-emphasize: 0 1px 4px rgba(0,0,0,0.08), 0 0 1px rgba(0,0,0,0.08);
  --shadow-normal: 0 2px 8px rgba(0,0,0,0.12), 0 0 1px rgba(0,0,0,0.08);
  --shadow-strong: 0 6px 16px rgba(0,0,0,0.12), 0 0 1px rgba(0,0,0,0.12);
  --shadow-heavy: 0 12px 32px rgba(0,0,0,0.16), 0 0 1px rgba(0,0,0,0.12);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-normal: 200ms; /* @kind other */
  --duration-slow: 320ms; /* @kind other */
}

/* ---- semantic aliases ---- */
/* Wanted Design System — Semantic color aliases
   Friendly, intent-named aliases over the raw Figma token closure
   (tokens/fig-tokens.css). These are the names components should use.
   They resolve through the theme layers in fig-tokens.css, so flipping
   :root[data-theme="dark"] recolors everything automatically. */

:root {
  /* Brand / primary */
  --color-primary: var(--primary-normal);          /* rgb(51,102,255) */
  --color-primary-strong: var(--primary-strong);
  --color-primary-heavy: var(--primary-heavy);

  /* Text / labels */
  --text-strong: var(--label-strong);              /* near-black */
  --text-normal: var(--label-normal);              /* default body text */
  --text-neutral: var(--label-neutral);
  --text-alternative: var(--label-alternative);    /* secondary text */
  --text-assistive: var(--label-assistive);        /* tertiary / hint */
  --text-disabled: var(--label-disable);
  --text-on-primary: var(--static-white);

  /* Surfaces / backgrounds */
  --surface-base: var(--background-normal-normal);
  --surface-alternative: var(--background-normal-alternative);
  --surface-elevated: var(--background-elevated-normal);
  --surface-card: var(--background-elevated-normal);
  --surface-inverse: var(--inverse-background);

  /* Fills (translucent neutral) */
  --fill-subtle: var(--fill-alternative);
  --fill-default: var(--fill-normal);
  --fill-emphasis: var(--fill-strong);

  /* Lines / borders */
  --border-subtle: var(--line-normal-alternative);
  --border-default: var(--line-normal-normal);
  --border-neutral: var(--line-normal-neutral);
  --border-strong: var(--line-normal-strong);

  /* Status */
  --color-positive: var(--status-positive);        /* green */
  --color-negative: var(--status-negative);        /* red */
  --color-cautionary: var(--status-cautionary);    /* orange */
  --color-info: var(--primary-normal);

  /* Interaction */
  --color-disabled-bg: var(--interaction-disable);
  --color-inactive: var(--interaction-inactive);

  /* Overlay / dimmer */
  --color-dimmer: var(--material-dimmer);

  /* Accent foregrounds (for tags / chips / decorative) */
  --accent-violet-fg: var(--accent-foreground-violet);
  --accent-cyan-fg: var(--accent-foreground-cyan);
  --accent-pink-fg: var(--accent-foreground-pink);
  --accent-green-fg: var(--accent-foreground-green);
  --accent-orange-fg: var(--accent-foreground-orange);
}

/* ---- fig-typography ---- */
/* No TEXT/EFFECT styles in this file. */

/* ---- apply brand font site-wide ---- */
body{font-family:var(--font-sans);}