/* Design values for the marketing site, declared once. They follow the v3 app
   (app/src/utils/colors.ts, app/src/theme/v3.ts) and the folded K icon. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/landing/assets/fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('/landing/assets/fonts/caveat-latin.woff2') format('woff2');
}

:root {
  /* app surfaces */
  --cream: #FBF9F6;
  --cream-2: #F4F1EC;
  --cream-3: #ECE7E0;
  --surface: #FFFFFF;
  --line: #E6E0D8;
  --line-2: #D6CFC5;

  /* app text and teal */
  --ink: #1E2B29;
  --ink-2: #52605C;
  --ink-3: #616D69;
  --teal: #0B6B64;
  --teal-dark: #08554F;
  --teal-tint: #E4F4F1;

  /* from the folded K */
  --k-cream: #E9E0CB;
  --amber: #DA8D29;
  --amber-soft: #F4DDB6;
  --amber-ink: #8A5510;
  --evergreen: #02292C;
  --evergreen-2: #0B3A3B;

  /* the paper list (same values as the app's welcome art) */
  --paper: #FFFDF6;
  --paper-ink: #25407A;
  --paper-rule: rgba(84, 132, 196, 0.28);
  --paper-tape: rgba(233, 214, 160, 0.75);

  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 18px;
  --radius-xl: 26px;

  --shadow-card: 0 1px 2px rgba(30, 43, 41, 0.06), 0 0 0 1px rgba(30, 43, 41, 0.03);
  --shadow-raised: 0 12px 32px rgba(30, 43, 41, 0.12);

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --hand: 'Caveat', 'Noteworthy', 'Bradley Hand', cursive;

  --wrap: 1120px;
  --gutter: 20px;
  --section-y: 72px;
  --focus: 0 0 0 3px var(--cream), 0 0 0 6px var(--teal);
}

@media (min-width: 720px) {
  :root { --gutter: 32px; --section-y: 104px; }
}