/*
 * Catalysi design tokens — ported from Catalysi Website src/styles/global.css (LOCKED v1).
 * Custom properties for layout/copy; Daisy semantic colors are overridden in catalysi-theme-brand.css.
 */
:root {
  --color-brand: #410058;
  --color-brand-amber: #f38800;
  --color-brand-deep: #5e386b;
  --color-signal-yellow: #ffcc00;
  --color-growth-green: #24b300;
  --color-brand-violet: #7700b3;
  --color-deep-navy: #2f4858;
  --color-accent-coral: #f05400;
  --color-accent-orange: #f08a00;
  --color-accent-amber: #f38800;
  --color-bg-page: #fafafa;
  --color-bg-white: #ffffff;
  --color-bg-muted-purple: #f3ecf6;
  --color-bg-inverse: #410058;
  --color-text: #2f4858;
  --color-text-muted: #5a6570;
  --color-border: #e8e4eb;
  --color-border-ui: #e8e8e8;
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.08);
  --control-radius: var(--radius-sm);
  --control-fg: var(--color-brand);
  --control-bg: #ffffff;
  --control-bg-hover: #f6f1f8;
  --control-border: rgba(65, 0, 88, 0.34);
  --control-border-hover: rgba(65, 0, 88, 0.5);
  --control-focus-ring: rgba(65, 0, 88, 0.28);
  --control-shadow: 0 1px 2px rgba(47, 72, 88, 0.05);
  --control-shadow-hover: 0 2px 6px rgba(47, 72, 88, 0.1);
  --card-bg: var(--color-bg-white);
  --card-border: var(--color-border);
  --card-shadow: var(--shadow-card);
  --card-shadow-hover: var(--shadow-card-hover);
  --color-bg-elevated: #faf9fb;
  /** Shared by `.cs-site-header` and `.cs-site-footer` (subtle top/bottom bookend). */
  --cs-site-chrome-gradient: linear-gradient(
    180deg,
    var(--color-bg-white) 0%,
    var(--color-bg-elevated) 100%
  );
  --container: 75rem;
  /* Symmetric horizontal gutters — scales with viewport, caps on large screens */
  --container-pad-inline: clamp(1rem, 4vw, 2rem);
  --content-prose-max: 42rem;
  --hero-band-pt: clamp(3rem, 8vw, 6.75rem);
  --hero-band-pb: clamp(3rem, 6vw, 5rem);
  --hero-inner-max: 46rem;
  --header-h: 4rem;
  --page-first-section-pt: 2.5rem;
  --type-hero-h1: clamp(2rem, 4vw, 3.25rem);
  --type-home-hero-h1: clamp(2rem, 4vw, 3.5rem);
  --type-page-h1: clamp(2rem, 4vw, 2.75rem);
  --type-band-h2: clamp(1.625rem, 3vw, 2.5rem);
  --type-section-h2: clamp(1.5rem, 2.5vw, 2rem);
  --type-cta-band-h2: clamp(1.625rem, 3vw, 2.25rem);
  /* Sub-heading text scale (DEC-0018) — 4 steps covering captions through
     card titles/large numerals. Consolidated from ~15 near-duplicate
     hand-authored font-size values; see docs/decisions/DEC-0018. */
  --text-sm: 0.8125rem;
  --text-md: clamp(0.9375rem, 0.6vw + 0.85rem, 1rem);
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --hero-page-h1-max: 40rem;
  --duration-fast: 180ms;

  /* Spacing scale (rem) — layout + homepage system (DEC-0004) */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --section-space-y: clamp(3rem, 6vw, 7.5rem);
  --section-space-y-lg: clamp(4rem, 9vw, 10rem);
  --section-header-max: 48rem;

  /* Motion tokens (DEC-0005) — use for transitions; hero scripts should honor prefers-reduced-motion */
  --motion-duration-xs: 120ms;
  --motion-duration-sm: 180ms;
  --motion-duration-md: 320ms;
  --motion-duration-lg: 480ms;
  --motion-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /** Hover lift in rem — matches primary CTA (-2px) for cards, tabs, outline controls */
  --motion-interactive-translate-hover: -0.125rem;

  /**
   * Unified interactive transitions (buttons, nav CTA, design-system tabs/cards).
   * Same duration + easing as .cs-btn-amber / .cs-control — use for any new hover affordance.
   */
  --motion-interactive-duration: var(--motion-duration-sm);
  --motion-interactive-ease: var(--motion-ease-out);

  /* Placeholder / diagram neutrals */
  --color-placeholder-bg: #f3ecf6;
  --color-placeholder-stroke: rgba(65, 0, 88, 0.18);
  --color-placeholder-stroke-strong: rgba(65, 0, 88, 0.28);

  /* Aliases used in earlier marketing CSS */
  --catalysi-purple: var(--color-brand);
  --catalysi-amber: var(--color-brand-amber);
  --catalysi-navy: var(--color-deep-navy);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body.cs-brand-body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
}

.cs-brand-body a:not(.btn):not([class*='link-']) {
  color: var(--color-brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.cs-brand-body a:not(.btn):not([class*='link-']):hover {
  color: var(--color-brand-deep);
}

.cs-brand-body :focus-visible {
  outline: 2px solid var(--control-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cs-btn-amber,
  .cs-btn-nav-cta,
  .cs-btn-inverse-light,
  .cs-control,
  .cs-card--interactive,
  .cs-stat-card {
    transition: none !important;
  }

  .cs-btn-amber:hover,
  .cs-btn-nav-cta:hover,
  .cs-btn-inverse-light:hover,
  .cs-card--interactive:hover,
  .cs-stat-card:hover {
    transform: none;
  }
}

.cs-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad-inline);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}