/* MathPuzzle Forge UI — generated from tokens.json */
:root, [data-theme="light"] {
  --magnolia: #fcfbf8;
  --linen: #f5f3ee;
  --smoke: #f5f5f7;
  --ash: #e4e6e9;
  --silver: #d8dce0;
  --neutral-200: #c6ccd2;
  --neutral-350: #93a0aa;
  --neutral-450: #748491;
  --neutral-700: #3d464e;
  --steel: #5f6d77;
  --midnight: #071a31;
  --navy: #0e396a;
  --blue-800: #0c2d54;
  --blue-700: #114580;
  --cobalt: #1e5ea7;
  --lake: #4890e3;
  --cornflower: #6bb1ff;
  --blue-250: #84c1ff;
  --sky: #c1defe;
  --blue-100: #d5e8fe;
  --rain: #edf5ff;
  --cloud: #f4f9ff;
  --lime: #dbee9f;
  --green-700: #3f491b;
  --avocado: #343c17;
  --peach: #ffd39d;
  --coffee: #5d3e20;
  --yellow-100: #ffe67c;
  --yellow-750: #473700;
  --red-100: #fedfda;
  --red-150: #fcd1ca;
  --red-500: #b32812;
  --red-700: #841f0e;
  --honey: #b07a00;
  --sunflower: #ffc94d;
  --iris: #d4c2ff;
  --lilac: #b89ffa;
  --plum: #4d3589;
  --seafoam: #baf0ec;
  --jade: #5ddfd7;
  --surface-primary: var(--magnolia);
  --surface-secondary: var(--linen);
  --surface-raised: #ffffff;
  --surface-selected: var(--rain);
  --text-primary: var(--midnight);
  --text-secondary: var(--steel);
  --text-tertiary: var(--neutral-350);
  --text-brand: var(--cobalt);
  --border-subtle: var(--silver);
  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-450);
  --divider: #071a311a;
  --action-primary-bg: var(--cobalt);
  --action-primary-bg-hover: var(--navy);
  --action-primary-bg-pressed: var(--blue-800);
  --action-primary-text: #ffffff;
  --action-secondary-border: var(--midnight);
  --focus-ring: var(--cobalt);
  --iconbutton-bg: #071a310d;
  --iconbutton-bg-hover: #071a311a;
  --iconbutton-bg-pressed: #071a3133;
  --iconbutton-border: #071a310d;
  --overlay: #071a3133;
  --skeleton-base: var(--ash);
  --skeleton-shine: var(--smoke);
  --banner-bg: var(--blue-250);
  --banner-text: var(--midnight);
  --tile-sky: var(--sky);
  --tile-sky-ink: var(--blue-800);
  --tile-lime: var(--lime);
  --tile-lime-ink: var(--avocado);
  --tile-peach: var(--peach);
  --tile-peach-ink: var(--coffee);
  --tile-iris: var(--iris);
  --tile-iris-ink: var(--plum);
  --tile-seafoam: var(--seafoam);
  --tile-seafoam-ink: var(--midnight);
  --badge-neutral-bg: #071a310d;
  --badge-neutral-text: var(--neutral-700);
  --badge-info-bg: var(--blue-100);
  --badge-info-text: var(--blue-700);
  --badge-success-bg: var(--lime);
  --badge-success-text: var(--green-700);
  --badge-warning-bg: var(--yellow-100);
  --badge-warning-text: var(--yellow-750);
  --badge-error-bg: var(--red-100);
  --badge-error-text: var(--red-700);
  --status-error: var(--red-500);
  --rating-star: var(--honey);
  --rating-star-empty: var(--neutral-450);
  --glow-1: var(--cornflower);
  --glow-2: var(--sky);
  --glow-3: var(--jade);
  --glow-4: var(--lilac);
  --glow-5: var(--lake);
  --glow-6: var(--seafoam);
  --shadow-ui-sm: 0 4px 5px #5f6d770a, 0 6px 10px #5f6d770d;
  --shadow-ui-md: 0 4px 5px #5f6d770a, 0 4px 10px #5f6d7708, 0 10px 20px #5f6d770d;
  --shadow-ui-lg: 0 4px 5px #5f6d770a, 0 8px 15px #5f6d7708, 0 15px 30px #5f6d770f;
  --shadow-ui-xl: 0 4px 5px #5f6d770a, 0 8px 15px #5f6d7708, 0 30px 50px #5f6d7714;
  --shadow-ui-2xl: 0 4px 5px #5f6d770a, 0 10px 15px #5f6d770a, 0 40px 50px #5f6d771a;
}
[data-theme="dark"] {
  --surface-primary: var(--midnight);
  --surface-secondary: var(--blue-800);
  --surface-raised: var(--navy);
  --surface-selected: #163f70;
  --text-primary: var(--magnolia);
  --text-secondary: var(--neutral-200);
  --text-tertiary: var(--neutral-450);
  --text-brand: var(--blue-250);
  --border-subtle: #fcfbf81f;
  --border-default: #fcfbf833;
  --border-strong: var(--neutral-450);
  --divider: #fcfbf81a;
  --action-primary-bg: #2a6fc0;
  --action-primary-bg-hover: var(--cobalt);
  --action-primary-bg-pressed: var(--blue-700);
  --action-primary-text: #ffffff;
  --action-secondary-border: var(--magnolia);
  --focus-ring: var(--cornflower);
  --iconbutton-bg: #fcfbf80d;
  --iconbutton-bg-hover: #fcfbf81a;
  --iconbutton-bg-pressed: #fcfbf833;
  --iconbutton-border: #fcfbf81a;
  --overlay: #0b0d0fb3;
  --skeleton-base: var(--navy);
  --skeleton-shine: var(--blue-700);
  --banner-bg: var(--blue-250);
  --banner-text: var(--midnight);
  --tile-sky: var(--sky);
  --tile-sky-ink: var(--blue-800);
  --tile-lime: var(--lime);
  --tile-lime-ink: var(--avocado);
  --tile-peach: var(--peach);
  --tile-peach-ink: var(--coffee);
  --tile-iris: var(--iris);
  --tile-iris-ink: var(--plum);
  --tile-seafoam: var(--seafoam);
  --tile-seafoam-ink: var(--midnight);
  --badge-neutral-bg: #fcfbf833;
  --badge-neutral-text: var(--magnolia);
  --badge-info-bg: var(--blue-700);
  --badge-info-text: var(--blue-100);
  --badge-success-bg: var(--lime);
  --badge-success-text: var(--green-700);
  --badge-warning-bg: var(--yellow-100);
  --badge-warning-text: var(--yellow-750);
  --badge-error-bg: var(--red-100);
  --badge-error-text: var(--red-700);
  --status-error: var(--red-150);
  --rating-star: var(--sunflower);
  --rating-star-empty: var(--neutral-350);
  --glow-1: var(--cornflower);
  --glow-2: var(--sky);
  --glow-3: var(--jade);
  --glow-4: var(--lilac);
  --glow-5: var(--lake);
  --glow-6: var(--seafoam);
  --shadow-ui-sm: 0 4px 5px #0b0d0f33, 0 6px 10px #0b0d0f33;
  --shadow-ui-md: 0 4px 5px #0b0d0f33, 0 4px 10px #0b0d0f33, 0 10px 20px #0b0d0f33;
  --shadow-ui-lg: 0 4px 5px #0b0d0f33, 0 8px 15px #0b0d0f33, 0 15px 30px #0b0d0f33;
  --shadow-ui-xl: 0 4px 5px #0b0d0f33, 0 8px 15px #0b0d0f33, 0 30px 50px #0b0d0f33;
  --shadow-ui-2xl: 0 4px 5px #0b0d0f33, 0 10px 15px #0b0d0f33, 0 40px 50px #0b0d0f33;
}
:root {
  --gap-xxs: 4px;
  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 16px;
  --gap-lg: 24px;
  --gap-xl: 32px;
  --gap-2xl: 48px;
  --gap-3xl: 56px;
  --gap-4xl: 64px;
  --radius-ui-xxs: 4px;
  --radius-ui-sm: 8px;
  --radius-btn-standard: 10px;
  --radius-ui-md: 12px;
  --radius-ui-lg: 16px;
  --radius-ui-xl: 20px;
  --radius-ui-2xl: 24px;
  --radius-ui-3xl: 32px;
  --radius-ui-full: 9999px;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-dialog: 250ms;
  --duration-slow: 300ms;
  --duration-rise: 600ms;
  --duration-wave: 2.4s;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-pulse: cubic-bezier(0.4, 0, 0.6, 1);
  --font-display: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: Geist, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ui-huge { font-family: var(--font-display); font-size: 40px; line-height: 1.1; font-weight: 500; letter-spacing: -1px; }
.ui-h1 { font-family: var(--font-display); font-size: 36px; line-height: 1.1; font-weight: 500; letter-spacing: -1px; }
.ui-h2 { font-family: var(--font-display); font-size: 28px; line-height: 1.2; font-weight: 500; }
.ui-h3 { font-family: var(--font-display); font-size: 24px; line-height: 1.1; font-weight: 500; }
.ui-h4 { font-family: var(--font-display); font-size: 22px; line-height: 1.2; font-weight: 500; }
.ui-h5 { font-family: var(--font-display); font-size: 20px; line-height: 1.4; font-weight: 500; }
.ui-h6 { font-family: var(--font-display); font-size: 18px; line-height: 1.4; font-weight: 500; }
.body-xl { font-family: var(--font-ui); font-size: 18px; line-height: 1.4; font-weight: 400; }
.body-lg { font-family: var(--font-ui); font-size: 16px; line-height: 1.4; font-weight: 400; }
.body-md { font-family: var(--font-ui); font-size: 14px; line-height: 1.4; font-weight: 400; }
.body-sm { font-family: var(--font-ui); font-size: 12px; line-height: 1.4; font-weight: 400; }
.body-xs { font-family: var(--font-ui); font-size: 10px; line-height: 1.4; font-weight: 500; }
.label { font-family: var(--font-ui); font-size: 14px; line-height: 1.4; font-weight: 500; }
.overline { font-family: var(--font-ui); font-size: 12px; line-height: 1; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }
.caption { font-family: var(--font-ui); font-size: 12px; line-height: 1.4; font-weight: 400; }