:root {
  --fjord-mist: #eef3f5;
  --fjord-dawn: #f4eeea;
  --fjord-day: #eef3f5;
  --fjord-deep: #082733;
  --fjord-primary: #0f3b4c;
  --fjord-spruce: #2f5d50;
  --fjord-lichen: #7fa38f;
  --fjord-granite: #5a6970;
  --fjord-white: #ffffff;
  --fjord-glass: rgb(255 255 255 / 72%);
  --fjord-glass-strong: rgb(255 255 255 / 86%);
  --fjord-border: rgb(255 255 255 / 72%);
  --fjord-line: rgb(8 39 51 / 14%);
  --fjord-shadow-soft: 0 24px 80px rgb(8 39 51 / 16%);
  --fjord-shadow-card: 0 18px 50px rgb(8 39 51 / 10%);

  --font-display: "Familjen Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "IBM Plex Mono", ui-monospace, monospace;

  --step-0: 0.25rem;
  --step-1: 0.5rem;
  --step-2: 0.75rem;
  --step-3: 1rem;
  --step-4: 1.5rem;
  --step-5: 2rem;
  --step-6: 3rem;
  --step-7: 4rem;
  --step-8: 6rem;
  --step-9: 8rem;

  --radius-sm: 0.75rem;
  --radius-md: 1.25rem;
  --radius-lg: 2rem;
  --radius-xl: 2.75rem;
  --radius-pill: 999px;

  --type-hero: clamp(2.75rem, 5.25vw, 4rem);
  --type-section: clamp(2.35rem, 4vw, 4.5rem);
  --type-sub: clamp(1.125rem, 1.4vw, 1.35rem);
  --type-body: clamp(1rem, 1vw, 1.09375rem);
  --measure: 68ch;

  --demo-radius: 24px;
  --demo-control-radius: 16px;
  --demo-button-radius: 999px;
  --demo-chip-radius: 999px;
  --demo-font-display: var(--font-display);
  --demo-heading-weight: 650;
  --demo-heading-tracking: -0.04em;
  --demo-accent: var(--fjord-primary);
  --demo-accent-strong: var(--fjord-deep);
  --demo-on-accent: var(--fjord-white);
  --demo-backdrop: rgb(8 39 51 / 54%);

  --reveal-duration: 850ms;
  --reveal-shift: 18px;
  --reveal-ease: cubic-bezier(0.2, 0.72, 0.18, 1);

  /* Contrast: Deep water #082733 on Mist #EEF3F5 = 13.64:1. */
  /* Contrast: Granite #5A6970 on Mist #EEF3F5 = 5.54:1. */
  /* Contrast: Fjord #0F3B4C on White = 11.06:1. */
  /* Contrast: White on Fjord #0F3B4C = 11.06:1. */
  /* Contrast: Spruce #2F5D50 on Mist #EEF3F5 = 6.85:1. */
  /* Contrast: Deep water #082733 on glass over bright hero is protected by rgba(255,255,255,.72) + blur; computed panel pair = 13.64:1 before photo contribution. */

  --background: var(--fjord-mist);
  --panel: var(--fjord-white);
  --panel-muted: #e3ecea;
  --border: var(--fjord-line);
  --foreground: var(--fjord-deep);
  --muted: var(--fjord-granite);
  --accent: var(--fjord-spruce);
  --accent-strong: var(--fjord-primary);
  --danger: #9c2f2f;
  --success: var(--fjord-spruce);
  --warning: #8b5b17;
}