/* Evlet brand tokens, v1.1 — 30 October 2026.
   Companion font: official Inter 4.1 release, licensed under OFL 1.1.
   Logo: custom bold outlined artwork. Do not recreate it with a font.
   Keep this CSS in spec/ or adjust the relative font URLs. */

@font-face {
  font-family: "Inter Variable";
  src: url("../fonts/web/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter Variable";
  src: url("../fonts/web/InterVariable-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --evlet-blue: #2563eb;
  --evlet-ink: #151515;
  --evlet-white: #ffffff;
  --evlet-canvas: #f7f8fa;
  --evlet-blue-tint: #eff6ff;
  --evlet-text-secondary: #526071;
  --evlet-text-muted: #667085;
  --evlet-border: #dde3ec; /* Decorative; not a sole control boundary. */
  --evlet-control-border: #667085;
  --evlet-dark-canvas: #111827;
  --evlet-dark-link: #93c5fd;
  --evlet-font: "Inter Variable", Inter, ui-sans-serif, system-ui,
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --evlet-weight-body: 400;
  --evlet-weight-label: 500;
  --evlet-weight-heading: 600;
  --evlet-weight-emphasis: 700;
  --evlet-type-caption: 0.75rem;
  --evlet-type-ui: 0.875rem;
  --evlet-type-body: 1rem;
  --evlet-type-lead: 1.125rem;
  --evlet-type-card: 1.25rem;
  --evlet-type-page: 1.75rem;
  --evlet-type-section: 2.25rem;
  --evlet-type-hero: clamp(2.25rem, 1.25rem + 3vw, 3.5rem);
  --evlet-radius-control: 0.5rem;
  --evlet-radius-panel: 0.75rem;
  --evlet-space-1: 0.25rem;
  --evlet-space-2: 0.5rem;
  --evlet-space-3: 0.75rem;
  --evlet-space-4: 1rem;
  --evlet-space-6: 1.5rem;
  --evlet-space-8: 2rem;
}

.evlet-type {
  font-family: var(--evlet-font);
  font-optical-sizing: auto;
  font-feature-settings: "liga" 1, "calt" 1;
  color: var(--evlet-ink);
}

.evlet-body { font-size: var(--evlet-type-body); line-height: 1.5; font-weight: 400; }
.evlet-lead { font-size: var(--evlet-type-lead); line-height: 1.5556; font-weight: 400; }
.evlet-ui { font-size: var(--evlet-type-ui); line-height: 1.4286; font-weight: 500; }
.evlet-caption { font-size: var(--evlet-type-caption); line-height: 1.5; font-weight: 400; letter-spacing: 0.005em; }
.evlet-card-heading { font-size: var(--evlet-type-card); line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; }
.evlet-page-heading { font-size: var(--evlet-type-page); line-height: 1.2857; font-weight: 600; letter-spacing: -0.02em; }
.evlet-section-heading { font-size: var(--evlet-type-section); line-height: 1.2222; font-weight: 600; letter-spacing: -0.025em; }
.evlet-hero-heading { font-size: var(--evlet-type-hero); line-height: 1.1429; font-weight: 600; letter-spacing: -0.035em; }
.evlet-tabular { font-variant-numeric: tabular-nums; }
.evlet-logo { display: block; max-width: 100%; height: auto; }
.evlet-focus-ring:focus-visible { outline: 3px solid var(--evlet-blue); outline-offset: 3px; }

/* Use an explicit theme, not automatic recolouring of logo artwork. */
.evlet-dark {
  background: var(--evlet-dark-canvas);
  color: var(--evlet-white);
}
.evlet-dark a { color: var(--evlet-dark-link); }
.evlet-dark .evlet-focus-ring:focus-visible { outline-color: var(--evlet-dark-link); }

@media (max-width: 40rem) {
  .evlet-hero-heading { line-height: 1.1667; letter-spacing: -0.025em; }
}