/* Lisavel design tokens. The Jelista family baseline (same type, scale, leading, spacing, radius,
   shadow and the slate neutral scale as the other Jelista products); only the brand values
   (banner, accent, bg, tints, focus ring, selection) are Lisavel's own "deep plum / indigo-violet"
   palette, so it reads as its own brand inside the family. Every colour, size, space and radius on
   the site comes from here. All text/background pairs below were checked at >= 4.5:1. */
:root {
  --font-family-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, "Noto Sans", sans-serif;
  --font-family-display: "Inter Display", "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-family-mono: "JetBrains Mono", "Cascadia Mono", Consolas, "Noto Sans Mono", monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --size-xs: 13px;
  --size-sm: 14px;
  --size-md: 16px;
  --size-lg: 20px;
  --size-xl: 25px;
  --size-2xl: 31px;
  --size-3xl: 39px;
  --size-hero: 52px;
  --size-hero-sm: 36px;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-body: 1.5;
  --tracking-tight: -0.02em;
  --tracking-display: -0.03em;

  /* neutrals (slate) */
  --color-ink: #0F172A;
  --color-ink-2: #334155;
  --color-muted: #475569;
  --color-subtle: #5E6B80;
  --color-surface: #FFFFFF;
  --color-surface-2: #F8FAFC;
  --color-surface-3: #F1F5F9;
  --color-border: #E2E8F0;
  --color-border-strong: #CBD5E1;

  /* Lisavel brand: deep plum banner, indigo-violet accent, soft lavender-grey page tint */
  --color-bg: #F5F3F7;
  --color-accent: #5146A6;
  --color-accent-hover: #403690;
  --color-accent-soft: #EEEBF8;
  --color-accent-ink: #FFFFFF;
  --color-focus: #5146A6;
  --color-selection: #DDD8F5;
  --color-banner: #2A2342;
  --color-banner-ink: #FFFFFF;
  --color-banner-muted: #BDB5D6;
  --color-banner-line: #453C66;
  --color-brand-accent: #5146A6;
  --color-brand-accent-dark: #B3A8F2;
  --color-tint-panel: #E6E1F3;
  --color-tint-soft: #F4F1FA;
  --color-tint-line: #D3CCEA;

  /* grades and status (muted on purpose; always paired with a word) */
  --color-grade-a: #15803D;  --color-grade-a-soft: #ECF7EF;   /* Strong */
  --color-grade-b: #4D7C0F;  --color-grade-b-soft: #F2F7E8;   /* Good */
  --color-grade-c: #B45309;  --color-grade-c-soft: #FDF5E9;   /* Needs attention */
  --color-grade-d: #A94E28;  --color-grade-d-soft: #FAF0EA;   /* Serious issues */
  --color-grade-f: #A23B3B;  --color-grade-f-soft: #F8EEEE;   /* Urgent */
  --color-ok: #15803D;
  --color-ok-soft: #ECF7EF;
  --color-fix: #B45309;
  --color-fix-soft: #FDF5E9;
  --color-info: #475569;
  --color-info-soft: #F1F5F9;
  --color-caveat: #475569;
  --color-caveat-soft: #F8FAFC;
  --color-error: #B91C1C;

  --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;
  --radius-sm: 4px;
  --radius-control: 6px;
  --radius-card: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-focus: 0 0 0 3px rgba(81, 70, 166, 0.35);

  --site-container: 1120px;
  --site-measure: 62ch;
  --site-gutter: var(--space-4);
  --site-section: var(--space-16);
  --site-header-h: 64px;
}