/*
  Nimbus Design System - Tokens
  Source of truth for lightweight Nimbus landing pages.

  Deployment note:
  Each language folder is deployed as its own Vercel root. Run
  `node scripts/sync-design-system.mjs` after editing this file so the
  compiled CSS is mirrored into bonjour/assets and hello/assets.
*/

:root {
  /* Brand */
  --nimbus-bronze: #b5886a;
  --nimbus-bronze-strong: #835636;
  --nimbus-bronze-tint: #efe3d7;
  --nimbus-bronze-ring: rgba(181, 136, 106, 0.18);

  /* Light surfaces */
  --nimbus-canvas: #f6f1ea;
  --nimbus-sunken: #efe6da;
  --nimbus-surface: #ffffff;
  --nimbus-surface-soft: #fcf8f2;
  --nimbus-panel: #16120e;

  /* Lines */
  --nimbus-line: #e7ddd0;
  --nimbus-line-strong: #d6c7b4;

  /* Text */
  --nimbus-ink: #1a1611;
  --nimbus-ink-soft: #3c352d;
  --nimbus-muted: #74695d;
  --nimbus-faint: #9a8d7d;
  --nimbus-on-panel: #f6efe7;
  --nimbus-on-fill: #ffffff;

  /* Status */
  --nimbus-success: #3f7d52;
  --nimbus-warning: #b8772e;
  --nimbus-danger: #b3402f;

  /* Typography */
  --nimbus-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --nimbus-font-mono: "Geist Mono", "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, monospace;

  --nimbus-text-display: clamp(48px, 6vw, 84px);
  --nimbus-text-h1: clamp(40px, 5vw, 64px);
  --nimbus-text-h2: clamp(30px, 4vw, 48px);
  --nimbus-text-h3: clamp(21px, 2.4vw, 28px);
  --nimbus-text-lead: clamp(17px, 1.5vw, 20px);
  --nimbus-text-body: 16px;
  --nimbus-text-sm: 14px;
  --nimbus-text-xs: 12.5px;

  --nimbus-weight-regular: 400;
  --nimbus-weight-medium: 500;
  --nimbus-weight-semibold: 600;
  --nimbus-weight-bold: 700;
  --nimbus-weight-black: 800;

  --nimbus-tracking-display: 0;
  --nimbus-tracking-heading: 0;
  --nimbus-tracking-normal: 0;
  --nimbus-tracking-label: 0.18em;

  --nimbus-leading-tight: 1.05;
  --nimbus-leading-snug: 1.25;
  --nimbus-leading-body: 1.6;

  /* Spacing */
  --nimbus-space-1: 4px;
  --nimbus-space-2: 8px;
  --nimbus-space-3: 12px;
  --nimbus-space-4: 16px;
  --nimbus-space-5: 24px;
  --nimbus-space-6: 32px;
  --nimbus-space-7: 48px;
  --nimbus-space-8: 64px;
  --nimbus-space-9: 96px;
  --nimbus-space-10: 128px;
  --nimbus-section: clamp(64px, 9vw, 116px);

  /* Radius */
  --nimbus-radius-sm: 8px;
  --nimbus-radius-md: 10px;
  --nimbus-radius-lg: 14px;
  --nimbus-radius-pill: 999px;

  /* Elevation */
  --nimbus-shadow-sm: 0 1px 2px rgba(40, 28, 18, 0.04), 0 8px 24px rgba(40, 28, 18, 0.06);
  --nimbus-shadow-md: 0 2px 6px rgba(40, 28, 18, 0.06), 0 18px 44px rgba(40, 28, 18, 0.1);
  --nimbus-shadow-lg: 0 30px 80px rgba(43, 30, 19, 0.16);

  /* Motion */
  --nimbus-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nimbus-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --nimbus-dur-fast: 150ms;
  --nimbus-dur: 250ms;
  --nimbus-dur-slow: 400ms;
  --nimbus-dur-reveal: 700ms;

  /* Layout */
  --nimbus-container: 1200px;
  --nimbus-container-wide: 1320px;
  --nimbus-container-narrow: 760px;
  --nimbus-gutter: clamp(18px, 4vw, 40px);
}