/* PK Design System — generated from tokens.json */
:root, [data-theme="default"] {
  --cyan-50: #edfbfd;
  --cyan-100: #a5e1eb;
  --cyan-200: #78d2e1;
  --cyan-300: #5ecbdb;
  --cyan-400: #46c4d7;
  --cyan-500: #3aabbc;
  --cyan-600: #2e95a4;
  --red-50: #fff0f0;
  --red-100: #ffdfe0;
  --red-200: #ffc8c8;
  --red-400: #ff4b4b;
  --red-500: #ea2b2b;
  --yellow-50: #fffbea;
  --yellow-100: #fff4d4;
  --yellow-200: #ffe79a;
  --yellow-400: #ffc800;
  --yellow-500: #e0a800;
  --orange-50: #fff5e6;
  --orange-100: #ffe5b4;
  --orange-400: #ff9600;
  --orange-500: #e08600;
  --green-50: #edfaf4;
  --green-100: #c6f0da;
  --green-400: #2ec47a;
  --green-500: #22a866;
  --blue-50: #eef9ff;
  --blue-100: #ddf4ff;
  --blue-400: #1cb0f6;
  --blue-500: #1899d6;
  --blue-900: #235390;
  --purple-50: #f8f0ff;
  --purple-100: #edd5ff;
  --purple-400: #ce82ff;
  --purple-500: #a560e8;
  --purple-600: #6a4bcf;
  --color-task: var(--purple-600);
  --white: #ffffff;
  --neutral-50: #f8fafc;
  --neutral-100: #edf2f7;
  --neutral-150: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;
  --surface-soft: rgba(255, 255, 255, 0.6);
  --border-soft: rgba(255, 255, 255, 1.0);
  --glass-tint: rgba(246, 248, 248, 0.6);
  --glass-border: rgba(255, 255, 255, 0.7);
  --tabbar-inactive: #bdcad7;
  --icon-coral: #ff6b70;
  --icon-coral-bg: #ffe6e9;
  --icon-amber: #ffb732;
  --icon-amber-bg: #fff6e6;
  --icon-lime: #84bb26;
  --icon-lime-bg: #e8f1e5;
  --icon-indigo: #614fe8;
  --icon-indigo-bg: #e6e6ff;
  --text-heading: var(--neutral-900);
  --text-primary: var(--neutral-800);
  --text-secondary: var(--neutral-500);
  --text-placeholder: var(--neutral-500);
  --text-placeholder-strong: var(--neutral-600);
  --text-disabled: var(--neutral-400);
  --text-inverse: var(--white);
  --text-on-brand: var(--white);
  --text-on-error: var(--white);
  --text-on-warning: var(--neutral-700);
  --text-link: var(--cyan-500);
  --text-link-visited: var(--purple-400);
  --surface-bg: var(--neutral-50);
  --surface-card: var(--white);
  --surface-elevated: var(--white);
  --surface-sunken: var(--neutral-100);
  --surface-overlay: rgba(0, 0, 0, 0.45);
  --surface-overlay-blur: rgba(0, 0, 0, 0.35);
  --surface-disabled: var(--neutral-100);
  --surface-tinted: var(--cyan-50);
  --surface-primary: var(--cyan-50);
  --surface-success: var(--green-50);
  --surface-error: var(--red-50);
  --surface-warning: var(--orange-50);
  --surface-info: var(--blue-50);
  --surface-premium: var(--yellow-50);
  --surface-reward: var(--yellow-50);
  --surface-highlight: var(--cyan-50);
  --surface-input: rgba(255, 255, 255, 0.4);
  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-400);
  --border-focus: var(--cyan-400);
  --border-success: var(--cyan-400);
  --border-error: var(--red-400);
  --border-warning: var(--orange-400);
  --border-info: var(--blue-400);
  --border-premium: var(--yellow-400);
  --color-primary: var(--cyan-400);
  --color-success: var(--cyan-400);
  --color-correct: var(--green-400);
  --color-error: var(--red-400);
  --color-warning: var(--orange-400);
  --color-info: var(--blue-400);
  --color-reward: var(--yellow-400);
  --color-streak: var(--orange-400);
  --color-premium: var(--yellow-500);
  --state-hover: rgba(0, 0, 0, 0.04);
  --state-pressed: rgba(0, 0, 0, 0.08);
  --state-selected: var(--cyan-50);
  --state-focused: rgba(70, 196, 215, 0.14);
  --state-disabled: rgba(0, 0, 0, 0.04);
  --focus-ring-color: var(--border-focus);
  --color-primary-shadow: #3aabbc;
  --color-success-shadow: #3aabbc;
  --color-correct-shadow: #22a866;
  --color-error-shadow: #ea2b2b;
  --color-warning-shadow: #e08600;
  --color-info-shadow: #1899d6;
  --color-reward-shadow: #e0a800;
  --color-premium-shadow: #e08600;
  --focus-ring-shadow: 0 0 0 3px rgba(70, 196, 215, 0.14);
  --shadow-soft: 0 6px 18px rgba(15, 23, 42, 0.05);
  --shadow-soft-on-white: 0 6px 18px rgba(15, 23, 42, 0.04);
  --shadow-soft-sm: 0 2px 10px rgba(15, 23, 42, 0.03);
  --shadow-brand-sm: 0 4px 12px rgba(70, 196, 215, 0.16);
  --shadow-card: 0 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-raised: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-modal: 0 12px 32px rgba(0, 0, 0, 0.18);
  --shadow-glass: 0 12px 20px rgba(59, 77, 79, 0.1), 0 3px 6px rgba(26, 77, 94, 0.06);
  --shadow-gloss-inset: inset 0 2px 3px rgba(255, 255, 255, 0.6), inset 0 -2px 2px rgba(0, 0, 0, 0.1);
}
:root {
  --focus-ring-width: 3px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --border-hairline: 1px;
  --border-thick: 2px;
  --button-depth: 4px;
  --screen-padding: 16px;
  --content-max-width: 480px;
  --header-height: 56px;
  --tabbar-height: 64px;
  --min-touch-target: 48px;
  --icon-xs: 16px;
  --icon-sm: 20px;
  --icon-md: 24px;
  --icon-lg: 32px;
  --icon-xl: 40px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 9999px;
  --motion-fast: 100ms;
  --motion-normal: 200ms;
  --motion-slow: 400ms;
  --motion-bounce: 600ms;
  --ease-in-signature: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-signature: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --focus-ring-error: 0 0 0 3px rgba(255, 75, 75, 0.15);
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --screen-top: calc(56px + env(safe-area-inset-top, 0px));
  --screen-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  --z-base: 0;
  --z-sticky: 10;
  --z-header: 20;
  --z-fab: 100;
  --z-sheet: 400;
  --z-modal: 500;
  --z-loading: 600;
  --z-toast: 700;
  --z-network: 800;
  --font-features-default: "kern" 1, "liga" 1, "calt" 1;
  --font-features-numeric: "kern" 1, "tnum" 1, "lnum" 1;
  --text-type-hero: 900 48px/56px inherit;
  --text-type-display: 900 32px/40px inherit;
  --text-type-title1: 800 24px/32px inherit;
  --text-type-title2: 800 20px/28px inherit;
  --text-type-title3: 700 17px/24px inherit;
  --text-type-body: 700 17px/26px inherit;
  --text-type-body-bold: 700 17px/26px inherit;
  --text-type-body-bold-sm: 700 15px/22px inherit;
  --text-type-body-lg: 400 17px/26px inherit;
  --text-type-body-md: 400 15px/22px inherit;
  --text-type-body-sm: 400 13px/18px inherit;
  --text-type-body-xs: 400 12px/16px inherit;
  --text-type-body-reading: 400 17px/28px inherit;
  --text-type-caption: 400 14px/20px inherit;
  --text-type-label: 600 13px/1 inherit;
  --text-type-micro: 700 11px/1 inherit;
  --text-type-overline: 700 11px/1 inherit;
  --text-type-button: 800 15px/20px inherit;
  --text-type-tag: 700 12px/1 inherit;
  --text-type-numeric: 900 24px/28px inherit;
  --text-body: 400 17px/26px inherit; /* From `body` in tokens/base.css — its font-family var(--font-family) is not one of the system’s font tokens. */
}
.type-hero {
  font-size: 48px;
  line-height: 56px;
  font-weight: 900;
  letter-spacing: 0;
}
.type-display {
  font-size: 32px;
  line-height: 40px;
  font-weight: 900;
  letter-spacing: 0;
}
.type-title1 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 800;
  letter-spacing: 0;
}
.type-title2 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 800;
  letter-spacing: 0;
}
.type-title3 {
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0;
}
.type-body {
  font-size: 17px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: 0;
}
.type-body-bold {
  font-size: 17px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: 0;
}
.type-body-bold-sm {
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: 0;
}
.type-body-lg {
  font-size: 17px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0;
}
.type-body-md {
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 0;
}
.type-body-sm {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0;
}
.type-body-xs {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
}
.type-body-reading {
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
}
.type-caption {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.type-label {
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.type-micro {
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.6px;
}
.type-overline {
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.6px;
}
.type-button {
  font-size: 15px;
  line-height: 20px;
  font-weight: 800;
  letter-spacing: 0.8px;
}
.type-tag {
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
}
.type-numeric {
  font-size: 24px;
  line-height: 28px;
  font-weight: 900;
  letter-spacing: 0;
}
.body {
  font-size: 17px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}