/* Echoit brand contract. Public pages and workspace share these primitives. */
:root {
  --brand-white: #FFFFFF;
  --brand-blue: #1686EF;
  --brand-sky: #54B5FF;
  --brand-ice: #EDF7FF;
  --brand-navy: #17324D;
  /* Compatibility names resolve to the approved blue palette, never green/violet. */
  --brand-lime: var(--brand-blue);
  --brand-lime-hover: var(--brand-sky);
  --brand-button-top: var(--brand-sky);
  --brand-button-middle: #359EF7;
  --brand-button-bottom: var(--brand-blue);
  --brand-button-gradient: linear-gradient(180deg, var(--brand-button-top) 0%, var(--brand-button-bottom) 100%);
  --brand-on-lime: #101827;
  --brand-accent: var(--brand-navy);
  --brand-lime-soft: var(--brand-ice);
  --brand-ink: #101827;
  --brand-muted: #46566A;
  --brand-line: #CBD8E5;
  /* Neutral canvas keeps blue an accent, not a page-wide wash. */
  --brand-canvas: #F7F8FA;
  --brand-surface-soft: #F2F4F7;
  --brand-surface: var(--brand-canvas);
  --font-sans: 'Inter', Arial, Helvetica, sans-serif;
  --font-heading: 'Noto Serif Display', Georgia, serif;
  --brand-stone: #46566A;
  --brand-violet: var(--brand-navy);
  --brand-link: var(--brand-navy);
  --brand-focus: var(--brand-ink);
  --brand-font: var(--font-sans);
  --brand-h1-weight: 400;
  --brand-h2-weight: 400;
  --brand-h3-weight: 600;
  --brand-body-weight: 400;
  --brand-h1-leading: 1.08;
  --brand-h2-leading: 1.15;
  --brand-h3-leading: 1.3;
  --brand-heading-weight: 400;
  --brand-heading-tracking: -.02em;
  --brand-heading-leading: 1.12;
  --brand-body-leading: 1.55;
  --brand-display-size: clamp(48px, 5.08vw, 64px);
  --brand-section-size: clamp(32px, 3.2vw, 44px);
  --brand-space-1: 8px;
  --brand-space-2: 16px;
  --brand-space-3: 24px;
  --brand-space-4: 32px;
  --brand-space-6: 48px;
  --brand-space-8: 64px;
  --brand-section-space: 80px;
  --brand-page-width: 1440px;
  --brand-radius-control: 999px;
  --brand-radius-card: 24px;
  --brand-control-min: 44px;
  --brand-motion-fast: 200ms;
  --brand-motion-scene: 800ms;
  --brand-motion-ease: cubic-bezier(.2,.7,.2,1);
  --brand-motion-distance: 28px;
}

@media(max-width:800px){:root{--brand-display-size:clamp(34px,8vw,42px);--brand-section-size:clamp(28px,6vw,34px)}}