/*
 * Vaze design tokens.
 * Constants belong to Vaze. Only the hero wash, the active carousel card
 * and its cover are tool-dependent (see src/data/sample-data.js → HERO_TOOLS).
 */
:root {
  /* Neutrals */
  --ink: #232936;
  --ink-2: #30343E;
  --ink-3: #464953;
  --muted: #5B606B;
  --muted-2: #454A55;
  --muted-3: #5E6370;
  --paper: #F6F3ED;
  --mist: #EBE7E1;
  --mist-2: #F0EDE7;
  --backing: #DBD5CD;
  --line: #CBC7C2;
  --line-2: #D9D5CF;
  --line-3: #E5E0D9;
  --line-4: #D0CAC2;
  --line-input: #B9B5B0;
  --line-chip: #CCC7BF;

  /* Vaze's one accent */
  --cobalt: #535481;
  --cobalt-hover: #3C3D62;
  --cobalt-halo: rgba(83, 84, 129, .12);

  /* Surfaces */
  --dusk: #3A3341;   /* hero ground */
  --night: #28272E;  /* security */
  --lavender: #CDC2E7;
  --step-on: #BFB0D9;

  /* Badges */
  --b-direct-bg: #E5E2EF; --b-direct-fg: #4B456F;
  --b-gateway-bg: #ECE4EE; --b-gateway-fg: #674970;
  --b-record-bg: #E6E4E0; --b-record-fg: #464953;
  --b-warn-bg: #FFEFE2; --b-warn-fg: #8F3D06;
  --b-ok-bg: #E3F4EB; --b-ok-fg: #13603A;

  /* Type */
  --font-sans: 'Figtree Variable', 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: 88px;
  --fs-section: 60px;
  --fs-title: 30px;
  --fs-lede: 19px;

  /* Layout */
  --gutter: clamp(20px, 4.45vw, 64px);
  --content: 1312px;
  --section-top: 128px;
  --section-bottom: 112px;
  --header-h: 92px;

  /* Shape */
  --r-pill: 999px;
  --r-card: 8px;
  --r-panel: 8px;
  --r-cover: 8px;
  --r-mark: 6px;

  /* Motion */
  --ease: cubic-bezier(.2, .75, .2, 1);
  --t-slide: 1.1s;
  --t-wash: 1.6s;
}

@media (max-width: 1099px) {
  :root {
    --fs-display: 72px;
    --fs-section: 50px;
    --section-top: 96px;
    --section-bottom: 88px;
  }
}

@media (max-width: 719px) {
  :root {
    --fs-display: 48px;
    --fs-section: 40px;
    --fs-title: 28px;
    --fs-lede: 17px;
    --section-top: 72px;
    --section-bottom: 64px;
    --header-h: 68px;
  }
}