/* Inspira Command Center — Design Tokens */
:root {
  color-scheme: light;

  --font-display: "Avenir Next", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Avenir Next", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --color-black: #000000;
  --color-white: #ffffff;
  --color-warm-gray: #DAD7CF;
  --color-light-warm-gray: #F1F0EE;
  --color-navy: #1B216B;
  --color-yellow: #FFD008;
  --color-blue-indigo: #4553A9;
  --color-lavender-blue: #B1BDFF;
  --color-rust: #C75A01;

  --color-canvas: #F1F0EE;
  --color-surface: rgba(255, 255, 255, 0.92);
  --color-surface-strong: #ffffff;
  --color-surface-muted: #F1F0EE;
  --color-ink: #1B216B;
  --color-ink-soft: #1B216B;
  --color-ink-faint: #4553A9;
  --color-heading: #1B216B;
  --color-line: rgba(27, 33, 107, 0.13);
  --color-line-strong: rgba(27, 33, 107, 0.26);

  --color-teal: #008D86;
  --color-blue: #1B216B;
  --color-purple: #4553A9;
  --color-success: #008D86;
  --color-warning: #C75A01;
  --color-danger: #C75A01;
  --color-link: #1B216B;
  --color-link-visited: #4553A9;

  --gradient-accent: linear-gradient(135deg, rgba(0, 141, 134, 0.16), rgba(69, 83, 169, 0.11) 56%, rgba(177, 189, 255, 0.22));
  --gradient-hero: radial-gradient(circle at top left, rgba(177, 189, 255, 0.22), transparent 34%),
    radial-gradient(circle at top right, rgba(0, 141, 134, 0.1), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 240, 238, 0.92));

  --shadow-xs: 0 8px 24px rgba(27, 33, 107, 0.05);
  --shadow-sm: 0 16px 40px rgba(27, 33, 107, 0.08);
  --shadow-md: 0 24px 64px rgba(27, 33, 107, 0.13);
  --shadow-focus: 0 0 0 4px rgba(177, 189, 255, 0.45);

  --radius-xs: 0.55rem;
  --radius-sm: 0.9rem;
  --radius-md: 1.35rem;
  --radius-lg: 1.85rem;
  --radius-xl: 2.4rem;
  --radius-pill: 999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.875rem;
  --space-8: 2.25rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;

  --container-max: 76rem;
  --reading-max: 46rem;
  --nav-height: 5rem;
  --section-gap: clamp(3.5rem, 6vw, 6rem);

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.45rem, 2vw, 1.75rem);
  --text-2xl: clamp(1.9rem, 4vw, 2.8rem);
  --text-3xl: clamp(2.5rem, 5vw, 4.4rem);

  --leading-tight: 1.08;
  --leading-copy: 1.65;
  --tracking-tight: -0.035em;
  --tracking-soft: 0.08em;

  --transition-fast: 160ms ease;
  --transition-base: 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (max-width: 720px) {
  :root {
    --nav-height: 4.5rem;
    --section-gap: 3rem;
  }
}