@font-face {
  font-family: "Inter Tight";
  src: url("/assets/redesign/v1/fonts/inter-tight-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/redesign/v1/fonts/bricolage-grotesque-latin-700-800.woff2") format("woff2");
  font-style: normal;
  font-weight: 700 800;
  font-stretch: 100%;
  font-display: swap;
}

:root {
  color-scheme: light;
  --sk-brand: #6F28D9;
  --sk-accent: #2B56E8;
  --sk-brand-gradient: linear-gradient(135deg, #6F28D9 0%, #2B56E8 100%);
  --sk-color-canvas: #F5F6FB;
  --sk-color-surface: #FFFFFF;
  --sk-color-surface-subtle: #ECEEF7;
  --sk-color-surface-muted: #E1E4F2;
  --sk-color-surface-dark: #12163A;
  --sk-color-text-primary: #12163A;
  --sk-color-text-secondary: #4A4F6A;
  --sk-color-action: #6F28D9;
  --sk-color-action-hover: #5920B5;
  --sk-color-focus: #2B56E8;
  --sk-color-border-subtle: #E1E4F2;
  --sk-color-border-control: #C8CCE0;
  --sk-color-success: #1A5C3D;
  --sk-color-success-bg: #EAF7F0;
  --sk-color-warning: #6B4910;
  --sk-color-warning-bg: #FFF5D8;
  --sk-color-danger: #B42318;
  --sk-color-danger-bg: #FFF0EE;
  --sk-color-on-action: #FFFFFF;
  --sk-font-family: "Inter Tight", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sk-font-logo: "Bricolage Grotesque", "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif;
  --sk-font-family-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --sk-font-size-page: clamp(2.75rem, 6vw, 5.75rem);
  --sk-font-size-section: clamp(2rem, 4vw, 4rem);
  --sk-font-size-card: 1.25rem;
  --sk-font-size-body: 1rem;
  --sk-font-size-label: 0.875rem;
  --sk-font-size-meta: 0.75rem;
  --sk-line-height-tight: 1.02;
  --sk-line-height-heading: 1.08;
  --sk-line-height-body: 1.55;
  --sk-font-weight-regular: 400;
  --sk-font-weight-medium: 500;
  --sk-font-weight-semibold: 600;
  --sk-space-1: 4px;
  --sk-space-2: 8px;
  --sk-space-3: 12px;
  --sk-space-4: 16px;
  --sk-space-5: 24px;
  --sk-space-6: 32px;
  --sk-space-7: 48px;
  --sk-space-8: 64px;
  --sk-radius-control: 12px;
  --sk-radius-card: 16px;
  --sk-radius-xl: 18px;
  --sk-radius-xxl: 24px;
  --sk-radius-pill: 9999px;
  --sk-shadow-card: 0 4px 24px rgba(111, 40, 217, 0.08);
  --sk-shadow-highlight: 0 8px 32px rgba(111, 40, 217, 0.10);
  --sk-focus-width: 3px;
  --sk-focus-offset: 3px;
  --sk-focus-color: #2B56E8;
  --sk-motion-fast: 180ms;
  --sk-motion-base: 220ms;
  --sk-motion-slow: 400ms;
  --sk-motion-easing: cubic-bezier(0.2, 0, 0, 1);
  --sk-size-target-min: 44px;
  --sk-size-icon-sm: 16px;
  --sk-size-icon-md: 20px;
  --sk-size-icon-lg: 24px;
  --sk-breakpoint-content-max: 1280px;
  --sk-breakpoint-mobile-ref: 390px;
  --sk-breakpoint-desktop-ref: 1440px;
  --sk-breakpoint-reflow-min: 320px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sk-motion-fast: 0ms;
    --sk-motion-base: 0ms;
    --sk-motion-slow: 0ms;
  }
}

:focus-visible {
  outline: var(--sk-focus-width) solid var(--sk-focus-color);
  outline-offset: var(--sk-focus-offset);
}