@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  font-family: var(--ep-font-ui);
  font-synthesis: none;
  text-rendering: optimizeLegibility;

  --ep-purple-900: #30235d;
  --ep-purple-800: #3e2d78;
  --ep-purple-700: #5135b0;
  --ep-purple-600: #6041cc;
  --ep-purple-500: #7357d6;
  --ep-purple-300: #b9a8ec;
  --ep-purple-100: #eeeafb;
  --ep-purple-50: #f6f3fd;

  --ep-neutral-50: #fafafd;
  --ep-neutral-100: #f5f4f9;
  --ep-neutral-200: #e6e3ee;
  --ep-neutral-600: #625f70;
  --ep-neutral-900: #232332;
  --ep-neutral-canvas: var(--ep-neutral-50);
  --ep-neutral-surface: #fff;
  --ep-neutral-soft: var(--ep-neutral-100);
  --ep-neutral-border: var(--ep-neutral-200);
  --ep-neutral-text: var(--ep-neutral-900);
  --ep-neutral-text-secondary: var(--ep-neutral-600);

  --ep-color-canvas: var(--ep-neutral-canvas);
  --ep-color-surface: var(--ep-neutral-surface);
  --ep-color-surface-soft: var(--ep-neutral-soft);
  --ep-color-border: var(--ep-neutral-border);
  --ep-color-text-primary: var(--ep-neutral-text);
  --ep-color-text-secondary: var(--ep-neutral-text-secondary);
  --ep-color-action-primary: var(--ep-purple-600);
  --ep-color-on-action: #fff;
  --ep-color-on-brand: #fff;
  --ep-color-highlight-soft: var(--ep-purple-100);
  --ep-color-focus: var(--ep-purple-800);
  --ep-color-success: #176b4d;
  --ep-color-success-bg: #e8f6ee;
  --ep-color-error: #b4233b;
  --ep-color-error-bg: #fff0f1;
  --ep-color-warning: #895d12;
  --ep-color-warning-bg: #fff6e1;
  --ep-color-info: #235f9b;
  --ep-color-info-bg: #ebf4ff;
  --ep-color-overlay: rgb(35 35 50 / 48%);

  --ep-space-1: 4px;
  --ep-space-2: 8px;
  --ep-space-3: 12px;
  --ep-space-4: 16px;
  --ep-space-5: 20px;
  --ep-space-6: 24px;
  --ep-space-8: 32px;
  --ep-space-10: 40px;

  --ep-radius-xs: 4px;
  --ep-radius-sm: 6px;
  --ep-radius-md: 8px;
  --ep-radius-lg: 10px;
  --ep-radius-full: 9999px;
  --ep-shadow-soft: 0 2px 8px rgb(35 35 50 / 5%);
  --ep-shadow-floating: 0 8px 24px rgb(35 35 50 / 10%);

  --ep-font-ui: "Manrope", system-ui, sans-serif;
  --ep-font-reading: "Source Sans 3", system-ui, sans-serif;
  --ep-type-display: clamp(1.75rem, 1.5rem + 1vw, 2rem);
  --ep-type-heading-1: 1.5rem;
  --ep-type-heading-2: 1.25rem;
  --ep-type-heading-3: 1.0625rem;
  --ep-type-body: 1rem;
  --ep-type-reading: 1.0625rem;
  --ep-type-question: 1.125rem;
  --ep-type-label: 0.875rem;
  --ep-type-support: 0.875rem;
  --ep-type-micro: 0.8125rem;
  --ep-leading-tight: 1.25;
  --ep-leading-body: 1.55;
  --ep-leading-reading: 1.65;
  --ep-target-touch: 44px;
  --ep-content-reading: 70ch;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ep-neutral-canvas: #11121b;
  --ep-neutral-surface: #1a1b28;
  --ep-neutral-soft: #222435;
  --ep-neutral-border: #383a50;
  --ep-neutral-text: #f3f2fa;
  --ep-neutral-text-secondary: #c3bfd3;
  --ep-color-action-primary: #b9a8ec;
  --ep-color-on-action: #232332;
  --ep-color-on-brand: #fff;
  --ep-color-highlight-soft: #302a49;
  --ep-color-focus: #c3b4f4;
  --ep-color-success: #83ddb4;
  --ep-color-success-bg: #173b31;
  --ep-color-error: #ffa4b2;
  --ep-color-error-bg: #3b1e28;
  --ep-color-warning: #e7c36d;
  --ep-color-warning-bg: #3b321d;
  --ep-color-info: #92c6f4;
  --ep-color-info-bg: #1c3046;
  --ep-color-overlay: rgb(0 0 0 / 62%);
  --ep-shadow-soft: 0 2px 8px rgb(0 0 0 / 20%);
  --ep-shadow-floating: 0 8px 24px rgb(0 0 0 / 30%);
}


* { box-sizing: border-box; }
html { background: var(--ep-color-canvas); color: var(--ep-color-text-primary); }
body { min-width: 320px; margin: 0; background: var(--ep-color-canvas); color: var(--ep-color-text-primary); font: 400 var(--ep-type-body)/var(--ep-leading-body) var(--ep-font-ui); }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
input, select, textarea { color: var(--ep-color-text-primary); background: var(--ep-color-surface); }
:focus-visible { outline: 2px solid var(--ep-color-focus); outline-offset: 3px; }

.ep-reading { max-width: var(--ep-content-reading); font: 400 var(--ep-type-reading)/var(--ep-leading-reading) var(--ep-font-reading); overflow-wrap: break-word; }
.ep-question { font: 400 var(--ep-type-question)/1.6 var(--ep-font-reading); overflow-wrap: break-word; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
