:root {

  --color-navy:          #20384c;
  --color-slate:         #3b4f5e;
  --color-slate-light:   #5b6c79;
  --color-steel:         #5c839c;
  --color-steel-deep:    #2a6488;

  --color-bg:            #f7f9fa;
  --color-surface:       #ffffff;
  --color-surface-sunken:#eef2f4;

  --color-primary:       #20384c;
  --color-primary-hover: #2b4b63;

  --color-secondary:     #3b4f5e;

  --color-accent:        #2a6488;
  --color-accent-hover:  #214f6e;

  --color-accent-soft:   #5c839c;

  --color-text:          #1f3340;
  --color-on-dark:       #f2f4f6;
  --color-muted:         #5b6c79;

  --color-border:        #d8dee3;
  --color-border-on-dark:#5b6c79;
  --color-faint:         #90969c;

  --color-focus:         #2a6488;
  --focus-ring:          0 0 0 3px rgba(42, 100, 136, 0.40);

  --font-display: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --font-sans:    "IBM Plex Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;

  --line-tight:  1.15;
  --line-snug:   1.35;
  --line-base:   1.6;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;

  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-md:   1.125rem;
  --font-size-lg:   1.5rem;
  --font-size-xl:   2rem;
  --font-size-2xl:  2.75rem;
  --font-size-3xl:  3.75rem;

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

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  --max-width:        72rem;
  --max-width-prose:  42rem;
  --max-width-wide:   80rem;

  --shadow-sm: 0 1px 2px rgba(32, 56, 76, 0.08);
  --shadow-md: 0 4px 14px rgba(32, 56, 76, 0.10);
  --shadow-lg: 0 12px 32px rgba(32, 56, 76, 0.14);

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

  --gradient-hero:
    linear-gradient(160deg, var(--color-primary) 0%, var(--color-secondary) 100%);

  --hero-hex-pattern:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='%23f2f4f6' fill-opacity='0.06' fill-rule='evenodd'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; }
}