/*
 * Design tokens. Colors: the palette behind every Storyblok color option
 * (design-docs/website-htmx-vocabulary.md §2), plus the few the site's own components use. Type:
 * the old site's type scale with the values jaris.io actually served (2026-09-29), which differ
 * from its source in places because the design-system preset's definitions won the cascade.
 */
:root {
  --color-white: #ffffff;
  --color-black: #111111;
  --color-purple: #140965;
  --color-primary-blue: #0052ff;
  --color-ink: #0a132c;
  --color-blue-700: #160869;
  --color-blue-500: #1b296d;
  --color-neutral-800: #1e293b;
  --color-accent-purple-dark: #642f8c;
  --color-accent-purple: #986eea;
  --color-accent-lime: #aeecce;
  --color-accent-lime-20: rgb(174 236 206 / 0.2);
  --color-neutral-300: #e2e8f0;
  --color-grey: #e6e6e6;
  --color-accent-purple-light: #eddcfb;
  --color-blue-100: #f0f6ff;
  --color-neutral-200: #f1f5f9;
  --color-accent-sorbet: #f29b78;
  --color-neutral-100: #f8fafc;
  --color-light-grey: #fafafc;
  --color-neutral-50: #fafbfd;
  --color-transparent: transparent;
  /* Rich-text styles (vocabulary §4) and the site's own components. */
  --color-green: #2a8466;
  --color-violet: #a74ee9;
  --color-violet-dark: #7b11ca;
  --color-neutral-500: #94a3b8;
  --color-neutral-700: #334155;
  /* The reset's text color (base.css). */
  --c-black: var(--color-black);

  --font-sans: "Open Sans", sans-serif;
}

/* Type scale: one class per step, as the old site named them. */
.heading-h1 {
  font-size: 3.75rem;
  font-weight: 600;
  line-height: 5rem;
}
.heading-h2 {
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 4.5rem;
}
.heading-h3 {
  font-size: 3rem;
  font-weight: 600;
  line-height: 4rem;
}
.heading-h4 {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 3rem;
}
.heading-h5 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 2.5rem;
}
.heading-h6 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2.25rem;
}
.heading-h7 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 2rem;
}
.heading-900 {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 120%;
}
.heading-800 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 125%;
}
.heading-700 {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 122%;
}
.heading-600 {
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 133%;
}
.heading-500 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 133%;
}
.heading-400 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 155%;
}
.heading-300 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 150%;
}
.heading-200 {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 140%;
}
.heading-100 {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 133%;
}
.body-lg {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2.25rem;
}
.body-default {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 2rem;
}
.body-sm {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.75rem;
}
.body-xs {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}
.caption {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.375rem;
}
.body-600 {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 155%;
}
.body-500 {
  font-size: 1rem;
  font-weight: 400;
  line-height: 150%;
}
.body-400 {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 140%;
}
.body-300 {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 166%;
}
.body-200 {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 166%;
}
.body-legal {
  font-size: 0.625rem;
  font-weight: 400;
  line-height: 140%;
}

/* The design-system palette the site's own components use (buttons, header, error page). */
:root {
  --ds-primary-100: #f0f6ff;
  --ds-primary-300: #9facff;
  --ds-primary-400: #7b9ef9;
  --ds-primary-500: #0052ff;
  --ds-primary-600: #003ce6;
  --ds-primary-700: #002fdb;
  --ds-neutral-100: #f8fafc;
  --ds-neutral-200: #f1f5f9;
  --ds-neutral-300: #e2e8f0;
  --ds-neutral-400: #cbd5e1;
  --ds-neutral-600: #64748b;
  --ds-neutral-700: #334155;
  --ds-secondary-100: #d4e6e0;
  --ds-secondary-300: #7fb5a3;
  --ds-secondary-500: #2a8466;
  --ds-secondary-600: #226a52;
  --ds-secondary-700: #194f3d;

  --shadow-header: 0 4px 10px 0 rgb(0 0 0 / 0.15);
  --shadow-menu: 0 0 0 1px rgb(17 17 17 / 0.05), 0 4px 10px 0 rgb(0 0 0 / 0.25);
  --shadow-button: 0 2px 16px 1px rgb(0 0 0 / 0.3);
  --shadow-button-outline: 0 2px 16px 0 rgb(0 0 0 / 0.2);
  --ring-primary: 0 0 0 1px #fff, 0 0 0 4px var(--ds-primary-300);
}