/* Same palette, glass surfaces and easing as the extension (packages/ui/src/styles). */
:root {
  --brand-50: #ecfdf6;
  --brand-100: #d1faea;
  --brand-200: #a7f3d6;
  --brand-500: #0fb985;
  --brand-600: #05966c;
  --brand-700: #057859;
  --brand-800: #075f48;

  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --white: #ffffff;

  --bg: #f2f3f7;
  --surface: var(--white);
  --text: var(--slate-900);
  --text-muted: var(--slate-600);
  --text-faint: var(--slate-500);
  --border: rgb(15 23 42 / 0.08);
  --tint: rgb(15 23 42 / 0.05);

  --glass-bg: rgb(255 255 255 / 0.62);
  --glass-bg-strong: rgb(255 255 255 / 0.8);
  --glass-border: rgb(255 255 255 / 0.75);
  --glass-filter: saturate(160%) blur(24px);
  --shadow-glass: 0 1px 0 rgb(255 255 255 / 0.6) inset, 0 12px 32px -16px rgb(15 23 42 / 0.22);
  --shadow-float: 0 30px 60px -24px rgb(15 23 42 / 0.35);
  --shadow-brand: 0 10px 24px -12px var(--brand-600);

  --font-sans:
    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --radius-xl: 14px;
  --radius-2xl: 22px;
  --radius-3xl: 28px;
  --radius-pill: 999px;
  --container: 1040px;
  --space: clamp(1rem, 3vw, 1.5rem);
  --section-gap: clamp(3.5rem, 8vw, 5.5rem);
}