/* ============================================
   TickTrack Landing Page — Design Tokens
   Scale B 8pt grid + Warm Paper color palette
   ============================================ */

:root {
  /* ── Colors ── */
  --paper: #FAF7F0;
  --forest: #015d67;
  --forest-deep: #014a53;
  --coral: #F36509;
  --ink: #6c584c;
  --ink-soft: #8c7e73;
  --surface: rgba(255, 255, 255, 0.35);
  --border: rgba(108, 88, 76, 0.25);
  --brand-outline: #3A2F2A;
  --brand-outline-text: #EDE8DE;

  /* Decorative tints */
  --icon-wash: rgba(108, 88, 76, 0.10);
  --joy: rgba(1, 93, 103, 0.08);

  /* ── Shadows ── */
  --shadow-sm: 0 6px 20px rgba(31, 30, 28, 0.06);
  --shadow-md: 0 14px 40px rgba(31, 30, 28, 0.08);
  --shadow-hover: 0 18px 60px rgba(31, 30, 28, 0.12);

  /* ── Typography ── */
  --font-display: "Anton", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;

  /* ── Radii (Scale B) ── */
  --r-4: 4px;
  --r-8: 8px;
  --r-12: 12px;
  --r-16: 16px;
  --r-24: 24px;
  --r-32: 32px;
  --r-round: 999px;

  /* Aliases matching existing class names */
  --r-sm: var(--r-12);
  --r-md: var(--r-16);
  --r-lg: var(--r-24);

  /* ── Spacing (Scale B) ── */
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-24: 24px;
  --s-32: 32px;

  /* ── Sizes (Scale B) ── */
  --sz-24: 24px;
  --sz-32: 32px;
  --sz-40: 40px;
  --sz-48: 48px;
  --sz-56: 56px;
}