/* =============================================================================
   deals.contact — design tokens
   Copied verbatim from site-layout-docs/tokens/. Do not edit values here;
   change them in the design system and re-copy so the two stay identical.
   ============================================================================= */

:root {
  /* Neutrals — warm paper + ink */
  --bg-page: oklch(96.5% 0.01 80);
  --bg-raised: oklch(99% 0.004 80);
  --bg-sunken: oklch(93.5% 0.012 80);
  --ink-1: oklch(24% 0.02 60);
  --ink-2: oklch(44% 0.018 60);
  --ink-3: oklch(58% 0.015 60);
  --line-1: oklch(86% 0.014 70);
  --line-2: oklch(91% 0.012 75);

  /* Accent — coral (the dot, links, live moments) */
  --coral-100: oklch(94% 0.045 35);
  --coral-300: oklch(82% 0.115 35);
  --coral-500: oklch(66% 0.19 35);
  --coral-700: oklch(52% 0.17 35);

  /* Semantic */
  --success: oklch(52% 0.13 150);
  --success-bg: oklch(94% 0.04 150);
  --warning: oklch(60% 0.13 70);
  --warning-text: oklch(50% 0.12 70);
  --warning-bg: oklch(94% 0.05 85);
  --danger: oklch(52% 0.19 15);
  --danger-bg: oklch(94% 0.03 15);

  /* Semantic aliases — primary actions are warm ink; coral is emphasis */
  --brand: oklch(28% 0.022 60);
  --brand-hover: oklch(18% 0.018 60);
  --brand-soft: oklch(92.5% 0.016 70);
  --accent: var(--coral-500);
  --text-body: var(--ink-1);
  --text-muted: var(--ink-2);
  --text-faint: var(--ink-3);
  --text-on-brand: oklch(97% 0.008 80);
  --text-link: var(--coral-700);
  --surface-page: var(--bg-page);
  --surface-card: var(--bg-raised);
  --surface-inset: var(--bg-sunken);
  --border-default: var(--line-1);
  --border-subtle: var(--line-2);
  --border-dotted: 1px dotted oklch(70% 0.02 70);
  --focus-ring: 0 0 0 3px oklch(82% 0.115 35 / 0.55);
}
:root {
  --font-display: 'Sora', 'Avenir Next', sans-serif;
  --font-body: 'Nunito Sans', 'Segoe UI', sans-serif;
  --font-mono: 'Spline Sans Mono', 'SF Mono', monospace;

  --text-xs: 12px;
  --text-sm: 13.5px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 25px;
  --text-2xl: 32px;
  --text-3xl: 44px;
  --text-4xl: 58px;

  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-body: 1.55;
  --tracking-display: -0.025em;
  --tracking-caps: 0.08em;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 20px;
  --radius-pill: 999px;

  --shadow-s: 0 1px 2px oklch(30% 0.02 60 / 0.07);
  --shadow-m: 0 2px 10px oklch(30% 0.02 60 / 0.09);
  --shadow-l: 0 10px 34px oklch(30% 0.02 60 / 0.14);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
}