/* Kinect design tokens. Every value used by kinect.css comes from here; components never
   hardcode a color, radius or font. Documented in docs/tech/01_design-system.md.

   Palette: "Glacier", option 2b of docs/design "Kinect Pairings", adopted 2026-09-24 as the
   only palette. The earlier default, 1c Meridian, is kept in git under the tag
   archive/landing-a-b-2026-09-24 and in the design system doc. Spacing, type and radius
   still come from 1c.

   Six hexes come straight from the pairing: Ember #F0803F, Deep water #163A5A,
   Current #4F86B0, Glacier #C9E3F0, Depth #0C1826, Frost #EEF4F8. Everything else is
   derived from them. Three values are deliberately not the pairing's:
   - text on ember is Depth, not white, because white on ember is 2.7:1;
   - links use Current darkened to #35688F, because the published value is 3.9:1 on white;
   - the brand slot is Current, not Deep water, so the accent word, the calendar's today
     and the confirmation code lift off the Deep water headings. Ember stays exclusive to
     the call to action.

   Mobile first: the base values are the phone values. Wider screens scale up below. */

:root {
  /* Color roles. Current is the brand and the links, Ember is the single "go" button,
     Deep water carries headings and dark surfaces. Ember is used for nothing else. */
  --k-brand: #35688F;
  --k-brand-deep: #24567F;
  --k-brand-container: #C9E3F0;
  --k-on-brand-container: #0C1826;

  --k-cta: #F0803F;
  --k-cta-hover: #DB6A28;
  --k-cta-hover-on-dark: #FF9A5E;
  --k-on-cta: #0C1826;
  --k-on-cta-dark: #0C1826;

  --k-interactive: #35688F;
  --k-interactive-on-dark: #C9E3F0;

  --k-navy: #163A5A;
  --k-ink: #0C1826;

  --k-bg: #EEF4F8;
  --k-surface: #FFFFFF;
  --k-surface-dark: #163A5A;
  --k-border: #D6E2EA;
  --k-border-strong: #B9CDDB;
  --k-border-on-dark: #2E5C7F;

  --k-text: #163A5A;
  --k-text-body: #3A4754;
  --k-text-muted: #64748B;
  --k-text-on-dark: #EEF4F8;
  --k-text-on-dark-body: #C9E3F0;
  --k-text-on-dark-muted: #9DB6C8;

  --k-accent-peach: #FBE3D2;
  --k-accent-blue: #C9E3F0;

  --k-success: #0F766E;
  --k-success-container: #CCFBF1;
  --k-error: #B4362B;
  --k-error-container: #FBE3D2;

  /* Calendar class colors: Friday ember (the one warm session), Saturday deep water, Sunday teal */
  --k-cal-fri: #C2601F;
  --k-cal-sat: #163A5A;
  --k-cal-sun: #0F766E;
  --k-cal-fri-bg: #FBE3D2;
  --k-cal-sat-bg: #C9E3F0;
  --k-cal-sun-bg: #CCFBF1;

  /* Type: geometric display + humanist body. Phone sizes first. */
  --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: 34px;   --k-h1-lh: 1.05; --k-h1-ls: -0.02em;
  --k-h2-size: 26px;   --k-h2-lh: 1.15; --k-h2-ls: -0.015em;
  --k-h3-size: 20px;   --k-h3-lh: 1.2;
  --k-title-size: 17px; --k-title-lh: 1.25;
  --k-stat-size: 22px;
  --k-lead-size: 16px; --k-lead-lh: 1.5;
  --k-body-size: 15px; --k-body-lh: 1.5;
  --k-body-sm-size: 14px;
  --k-meta-size: 13px; --k-meta-lh: 1.35;
  --k-eyebrow-size: 12px; --k-eyebrow-ls: 0.1em;
  --k-badge-size: 10px; --k-badge-ls: 0.06em;
  --k-wordmark-size: 20px;

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

  /* Space */
  --k-container: 1240px;
  --k-gutter: 16px;
  --k-section-y: 44px;
  --k-section-y-sm: 40px;
  --k-gap-xs: 6px;
  --k-gap-sm: 10px;
  --k-gap: 12px;
  --k-gap-md: 18px;
  --k-gap-lg: 26px;
  --k-gap-xl: 32px;
  --k-card-pad: 18px;
  --k-card-pad-sm: 14px;

  /* Buttons */
  --k-btn-pad-y: 13px; --k-btn-pad-x: 20px; --k-btn-size: 15px;
  --k-btn-sm-pad-y: 10px; --k-btn-sm-pad-x: 16px; --k-btn-sm-size: 14px;

  --k-hero-tint: rgba(22, 58, 90, 0.56);
  --k-shadow-cta: 0 8px 20px rgba(240, 128, 63, 0.32);
  --k-shadow-modal: 0 24px 64px rgba(12, 24, 38, 0.28);
  --k-ease: 160ms ease;
}

/* Tablet */
@media (min-width: 640px) {
  :root {
    --k-h1-size: 44px;
    --k-h2-size: 32px;
    --k-h3-size: 22px;
    --k-lead-size: 18px;
    --k-body-size: 16px;
    --k-stat-size: 26px;
    --k-gutter: 24px;
    --k-section-y: 60px;
    --k-section-y-sm: 52px;
    --k-card-pad: 22px;
    --k-gap: 16px;
    --k-gap-md: 24px;
    --k-gap-lg: 32px;
    --k-radius-xl: 24px;
    --k-radius-lg: 20px;
  }
}

/* Desktop: the 1c reference values */
@media (min-width: 1000px) {
  :root {
    --k-h1-size: 60px;   --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: 24px;
    --k-title-size: 19px;
    --k-stat-size: 28px;
    --k-lead-size: 19px;
    --k-body-size: 17px;
    --k-body-sm-size: 15px;
    --k-meta-size: 14px;
    --k-eyebrow-size: 13px;
    --k-badge-size: 11px;
    --k-wordmark-size: 22px;
    --k-gutter: 40px;
    --k-section-y: 80px;
    --k-section-y-sm: 72px;
    --k-gap-lg: 36px;
    --k-gap-xl: 48px;
    --k-card-pad: 28px;
    --k-card-pad-sm: 18px;
    --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;
  }
}