/* Zeelio design tokens for the marketing site.
   Mirrors @zeelio/tokens (apps/packages/tokens) — light theme roles only.
   Values are copied, never re-invented: see docs/design-system/CONTEXT.md. */

/* ---------- Fonts (vendored from @zeelio/tokens/fonts/web) ---------- */
@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/Fraunces-Soft-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/Fraunces-Soft-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../assets/fonts/HankenGrotesk-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../assets/fonts/HankenGrotesk-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../assets/fonts/HankenGrotesk-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../assets/fonts/HankenGrotesk-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour roles — light theme */
  --z-canvas: #f6f2eb;
  --z-surface: #ffffff;
  --z-surface-muted: #faf7f2;
  --z-shell: #1e1814;
  --z-shell-ink: #f5ede1;
  --z-line: #eadfce;
  --z-line-strong: #dac8b0;
  --z-control-border: #8f8274;
  --z-ink: #5d5448;
  --z-ink-strong: #2f2a26;
  --z-muted: #6f655a;
  --z-primary: #0c6e9e;
  /* deep primary: the legible action blue on cream */
  --z-primary-hover: #0a5c85;
  --z-primary-soft: #e8f4fb;
  --z-primary-foreground: #fdfefe;
  --z-accent: #d2a13d;
  --z-accent-soft: #fbf2db;

  /* Type */
  --z-font-body: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --z-font-display: 'Fraunces', ui-serif, Georgia, Cambria, 'Times New Roman', serif;

  /* Space */
  --z-space-1: 4px;
  --z-space-2: 8px;
  --z-space-3: 12px;
  --z-space-4: 16px;
  --z-space-5: 20px;
  --z-space-6: 24px;
  --z-space-8: 32px;
  --z-space-10: 40px;
  --z-space-12: 48px;
  --z-space-16: 64px;

  /* Radius */
  --z-radius-sm: 12px;
  --z-radius-md: 18px;
  --z-radius-lg: 28px;
  --z-radius-xl: 36px;
  --z-radius-pill: 999px;

  /* Control heights (ADR-0008) */
  --z-control-standard: 40px;
  --z-control-touch: 44px;

  /* Elevation */
  --z-elev-1: 0 2px 8px rgba(36, 26, 14, 0.08);
  --z-elev-2: 0 6px 16px rgba(36, 26, 14, 0.12);
  --z-elev-3: 0 14px 28px rgba(26, 18, 6, 0.18);

  /* Motion (ADR-0004) — restraint is the default */
  --z-quick: 160ms;
  --z-settle: 260ms;
  --z-ease: cubic-bezier(0.23, 1, 0.32, 1);
}