@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  --pk-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pk-font-mono: "SF Mono", Monaco, Inconsolata, "Roboto Mono", "Courier New", monospace;

  --pk-font-regular: 400;
  --pk-font-medium: 500;
  --pk-font-semibold: 600;
  --pk-font-bold: 700;
  --pk-font-heavy: 800;

  --pk-text-2xs: 0.6875rem;
  --pk-text-xs: 0.75rem;
  --pk-text-sm: 0.8125rem;
  --pk-text-md: 0.875rem;
  --pk-text-base: 1rem;
  --pk-text-lg: 1.125rem;
  --pk-text-xl: 1.25rem;
  --pk-text-2xl: 1.5rem;
  --pk-text-3xl: 2rem;

  --pk-leading-tight: 1.2;
  --pk-leading-heading: 1.25;
  --pk-leading-body: 1.5;

  --pk-purple: #332C87;
  --pk-pink: #EABAF5;
  --pk-yellow: #FCB445;
  --pk-chcs-green: #C7D1A9;
  --pk-hcp-cyan: #95AFA5;
  --pk-mhcp-purple: #7335D1;
  --pk-mncp-blue: #2E4870;
  --pk-mhhcp-blue: #6696E1;
  --pk-off-black: #1E1E1E;
  --pk-off-white: #F9F9F9;
  --pk-warm-cream: #FFF8F5;
  --pk-danger-red: #B42318;

  --pk-rgb-purple: 51 44 135;
  --pk-rgb-pink: 234 186 245;
  --pk-rgb-yellow: 252 180 69;
  --pk-rgb-chcs-green: 199 209 169;
  --pk-rgb-hcp-cyan: 149 175 165;
  --pk-rgb-mhcp-purple: 115 53 209;
  --pk-rgb-mncp-blue: 46 72 112;
  --pk-rgb-mhhcp-blue: 102 150 225;
  --pk-rgb-off-black: 30 30 30;
  --pk-rgb-off-white: 249 249 249;

  --pk-surface-page: var(--pk-off-white);
  --pk-surface-panel: #FFFFFF;
  --pk-surface-panel-muted: rgba(var(--pk-rgb-off-black) / 0.025);
  --pk-surface-brand-soft: rgba(var(--pk-rgb-purple) / 0.08);
  --pk-surface-info-soft: rgba(var(--pk-rgb-mhhcp-blue) / 0.14);
  --pk-surface-success-soft: rgba(var(--pk-rgb-chcs-green) / 0.42);
  --pk-surface-warning-soft: rgba(var(--pk-rgb-yellow) / 0.18);
  --pk-surface-danger-soft: rgba(var(--pk-rgb-pink) / 0.28);
  --pk-surface-scrim: rgba(var(--pk-rgb-off-black) / 0.46);

  --pk-text-primary: var(--pk-off-black);
  --pk-text-secondary: rgba(var(--pk-rgb-off-black) / 0.72);
  --pk-text-muted: rgba(var(--pk-rgb-off-black) / 0.58);
  --pk-text-subtle: rgba(var(--pk-rgb-off-black) / 0.44);
  --pk-text-inverse: #FFFFFF;
  --pk-text-brand: var(--pk-purple);
  --pk-text-info: var(--pk-mncp-blue);
  --pk-text-success: color-mix(in srgb, var(--pk-hcp-cyan) 58%, var(--pk-off-black));
  --pk-text-warning: color-mix(in srgb, var(--pk-yellow) 58%, var(--pk-off-black));
  --pk-text-danger: var(--pk-danger-red);

  --pk-border-subtle: rgba(var(--pk-rgb-off-black) / 0.08);
  --pk-border-default: rgba(var(--pk-rgb-off-black) / 0.14);
  --pk-border-strong: rgba(var(--pk-rgb-off-black) / 0.22);
  --pk-border-brand: rgba(var(--pk-rgb-purple) / 0.36);

  --pk-action-primary: var(--pk-purple);
  --pk-action-primary-hover: color-mix(in srgb, var(--pk-purple) 84%, var(--pk-off-black));
  --pk-action-primary-active: color-mix(in srgb, var(--pk-purple) 76%, var(--pk-off-black));
  --pk-action-secondary: var(--pk-surface-panel);
  --pk-action-secondary-hover: rgba(var(--pk-rgb-purple) / 0.06);
  --pk-action-warning: var(--pk-yellow);
  --pk-action-warning-hover: color-mix(in srgb, var(--pk-yellow) 88%, var(--pk-off-black));
  --pk-action-danger: var(--pk-danger-red);
  --pk-action-danger-hover: color-mix(in srgb, var(--pk-danger-red) 86%, var(--pk-off-black));

  --pk-radius-xs: 4px;
  --pk-radius-sm: 6px;
  --pk-radius-md: 8px;
  --pk-radius-lg: 8px;
  --pk-radius-xl: 12px;
  --pk-radius-pill: 999px;

  --pk-space-1: 4px;
  --pk-space-2: 8px;
  --pk-space-3: 12px;
  --pk-space-4: 16px;
  --pk-space-5: 20px;
  --pk-space-6: 24px;

  --pk-control-height-xs: 28px;
  --pk-control-height-sm: 32px;
  --pk-control-height-md: 36px;
  --pk-control-height-lg: 42px;

  --pk-shadow-xs: 0 1px 2px rgba(var(--pk-rgb-off-black) / 0.06);
  --pk-shadow-sm: 0 6px 16px rgba(var(--pk-rgb-off-black) / 0.08);
  --pk-shadow-md: 0 14px 34px rgba(var(--pk-rgb-off-black) / 0.12);
  --pk-shadow-modal: 0 28px 70px rgba(var(--pk-rgb-off-black) / 0.24);
  --pk-focus-ring: 0 0 0 3px rgba(var(--pk-rgb-mhhcp-blue) / 0.32);

  --pk-z-sticky: 30;
  --pk-z-dropdown: 100;
  --pk-z-header: 200;
  --pk-z-modal: 1000;
  --pk-z-modal-nested: 1100;
  --pk-z-toast: 1200;

  --pk-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --pk-duration-fast: 140ms;
  --pk-duration-base: 180ms;
}

html {
  font-family: var(--pk-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-gutter: stable;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
  font-family: var(--pk-font-sans);
}

body {
  background: var(--pk-surface-page);
  color: var(--pk-text-primary);
  font-weight: var(--pk-font-regular);
  font-synthesis-weight: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: inherit;
  letter-spacing: 0;
  line-height: var(--pk-leading-heading);
}

code,
kbd,
pre,
samp,
.pk-font-mono {
  font-family: var(--pk-font-mono);
}