/* Wachadoin design tokens — "The Glass Office". See docs/design-system.md.
   Use these variables everywhere; never copy the hex values into a page. */

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/fonts/schibsted-grotesk-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces, darkest to lightest */
  --ink-0: #121110;
  --ink-1: #1A1917;
  --ink-2: #24221F;
  --panel: #2A2825;
  --panel-2: #33302C;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);

  /* Text */
  --text: #F3F1EE;
  --text-2: #CFCAC3;
  --text-3: #A8A29A;

  /* The one accent, and the two meaning colours */
  --teal: #2BC7C4;
  --teal-ink: #0E2E2D;
  --teal-soft: rgba(43, 199, 196, 0.18);
  --teal-text: #7EE3E0;
  --amber: #F5A524;
  --amber-soft: rgba(245, 165, 36, 0.18);
  --amber-text: #F5C46B;
  --orange: #F26B3A;
  --orange-soft: rgba(242, 107, 58, 0.18);
  --orange-text: #FF9B78;
  --orange-ink: #2A140B;
  --lunch: #9C95C9; /* a permitted break: calm, not a warning colour */

  /* Glass: nav bar and the hero product window ONLY */
  --glass: rgba(44, 42, 39, 0.72);
  --glass-blur: 18px;

  /* Light surface for emails, PDFs and print */
  --paper: #F7F5F2;

  /* Type */
  --font-display: 'Schibsted Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --fs-hero: clamp(2.375rem, 5.5vw, 4rem);
  --fs-section: clamp(1.75rem, 3.4vw, 2.5rem);
  --fs-title: 1.5rem;
  --fs-card: 1.125rem;
  --fs-body: 1rem;
  --fs-ui: 0.875rem;
  --fs-caption: 0.75rem;

  /* Shape and space */
  --radius: 18px;
  --radius-sm: 12px;
  --pill: 999px;
  --gutter: clamp(16px, 4vw, 24px);
  --max: 1200px;
}