/* Kinect design tokens. Source: docs/design "Kinect Pairings" option 1c (Meridian) and
   "Kinect Landing 1c". Every value used by kinect.css comes from here; components never
   hardcode a color, radius or font. Documented in docs/tech/02_design-system.md. */

:root {
  /* Color: roles from 1c. Red is the brand, orange is the single "go" button, blue handles
     links and selection so red and orange never compete. */
  --k-brand: #C41E3A;
  --k-brand-deep: #8B1A1A;
  --k-brand-container: #FFDAD6;
  --k-on-brand-container: #6B0F1A;

  --k-cta: #F97316;
  --k-cta-hover: #EA6A0C;
  --k-cta-hover-on-dark: #FB8C3A;
  --k-on-cta: #FFFFFF;
  --k-on-cta-dark: #0F172A;

  --k-interactive: #3B82F6;
  --k-interactive-on-dark: #ADC6FF;

  --k-navy: #1C2340;
  --k-ink: #0F172A;

  --k-bg: #F5F5F5;
  --k-surface: #FFFFFF;
  --k-surface-dark: #1C2340;
  --k-border: #E2E8F0;
  --k-border-strong: #CBD5E1;
  --k-border-on-dark: #334155;

  --k-text: #1C2340;
  --k-text-body: #424242;
  --k-text-muted: #64748B;
  --k-text-on-dark: #F1F5F9;
  --k-text-on-dark-body: #CBD5E1;
  --k-text-on-dark-muted: #94A3B8;

  --k-accent-peach: #FFE4CC;
  --k-accent-blue: #DBEAFE;

  --k-success: #15803D;
  --k-success-container: #DCFCE7;
  --k-error: #B91C1C;
  --k-error-container: #FEE2E2;

  /* Type: geometric display + humanist body. */
  --k-font-display: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --k-font-body: 'Source Sans 3', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --k-h1-size: 64px;   --k-h1-lh: 1.02; --k-h1-ls: -0.025em;
  --k-h2-size: 40px;   --k-h2-lh: 1.1;  --k-h2-ls: -0.02em;
  --k-h3-size: 26px;   --k-h3-lh: 1.15;
  --k-title-size: 20px; --k-title-lh: 1.2;
  --k-stat-size: 28px;
  --k-lead-size: 20px; --k-lead-lh: 1.5;
  --k-body-size: 17px; --k-body-lh: 1.5;
  --k-body-sm-size: 16px;
  --k-meta-size: 14px; --k-meta-lh: 1.3;
  --k-eyebrow-size: 13px; --k-eyebrow-ls: 0.1em;
  --k-badge-size: 11px; --k-badge-ls: 0.06em;
  --k-wordmark-size: 22px;

  /* Shape */
  --k-radius-pill: 999px;
  --k-radius-xl: 24px;
  --k-radius-lg: 20px;
  --k-radius-md: 16px;
  --k-radius-sm: 14px;
  --k-radius-xs: 12px;
  --k-radius-mark: 8px;

  /* Space */
  --k-container: 1240px;
  --k-gutter: 40px;
  --k-section-y: 80px;
  --k-section-y-sm: 72px;
  --k-gap-xs: 6px;
  --k-gap-sm: 10px;
  --k-gap: 16px;
  --k-gap-md: 24px;
  --k-gap-lg: 36px;
  --k-gap-xl: 48px;
  --k-card-pad: 28px;
  --k-card-pad-sm: 18px;

  /* Buttons */
  --k-btn-pad-y: 16px; --k-btn-pad-x: 26px; --k-btn-size: 17px;
  --k-btn-sm-pad-y: 12px; --k-btn-sm-pad-x: 20px; --k-btn-sm-size: 15px;

  --k-shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.28);
  --k-ease: 160ms ease;
}

@media (max-width: 900px) {
  :root {
    --k-h1-size: 44px;
    --k-h2-size: 32px;
    --k-h3-size: 24px;
    --k-lead-size: 18px;
    --k-gutter: 20px;
    --k-section-y: 56px;
    --k-section-y-sm: 48px;
    --k-card-pad: 22px;
  }
}

@media (max-width: 480px) {
  :root {
    --k-h1-size: 38px;
    --k-gutter: 16px;
  }
}