/* Clover Tech — generated from tokens.json. Light is the default; add data-theme="dark" on <html> for dark. */
:root {
  --link: var(--green);
  --font-display: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-code: "SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-10: 40px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  --surface: #ffffff;
  --surface-raised: #f7f6f9;
  --surface-raised-2: #efedf3;
  --surface-overlay: #ffffff;
  --surface-muted: #5e4f72;
  --surface-green: #eef8f3;
  --check-tint: #d8f0e4;
  --line: #dcd8e3;
  --line-soft: #e6e3eb;
  --line-control: #8a8299;
  --line-green: #93d3b8;
  --ink: #221a33;
  --ink-mid: #413a52;
  --ink-muted: #5c5470;
  --green: #0b7a3b;
  --purple: #7a35d0;
  --violet: #8a2fc9;
  --danger: #b3261e;
  --danger-fill: #c4383a;
  --danger-soft: #fdecea;
  --mark-green: #00a774;
  --mark-lead-light: #05532a;
  --mark-lead-dark: #a6f7c3;
  --logo-circle: #00a774;
  --logo-lead: #05532a;
  --logo-edge: #000000;
  --logo-clover: #221a33;
  --logo-tech: #00a774;
  --chart-1: #0b7a3b;
  --chart-2: #234caf;
  --chart-3: #c63807;
  --chart-4: #6536a1;
  --chart-5: #0893a8;
  --chart-6: #980b5f;
  --shadow-pop: 0 4px 16px -4px #221a3326;
  --shadow-glow: 0 8px 32px -8px #221a3333;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #0b7a3b;
}
:root[data-theme="dark"] {
  --surface: #221a33;
  --surface-raised: #302744;
  --surface-raised-2: #42365e;
  --surface-overlay: #453960d9;
  --surface-muted: #847398;
  --surface-green: #1a3b2f;
  --check-tint: #1e4435;
  --line: #423b5b;
  --line-soft: #84739833;
  --line-control: #847398;
  --line-green: #35775d;
  --ink: #e0dde4;
  --ink-mid: #c6c1cd;
  --ink-muted: #ada6b7;
  --green: #33e672;
  --purple: #a861fc;
  --violet: #d375ff;
  --danger: #ff957d;
  --danger-fill: #e76b6d;
  --danger-soft: #e76b6d1a;
  --mark-green: #00a774;
  --mark-lead-light: #05532a;
  --mark-lead-dark: #a6f7c3;
  --logo-circle: #00a774;
  --logo-lead: #a6f7c3;
  --logo-edge: #ffffff;
  --logo-clover: #ffffff;
  --logo-tech: #00a774;
  --chart-1: #03a14e;
  --chart-2: #3c7cb5;
  --chart-3: #dd7002;
  --chart-4: #7860ef;
  --chart-5: #08a1cc;
  --chart-6: #ab5b8c;
  --shadow-pop: 0 6px 30px -6px #00000040;
  --shadow-glow: 0 0 20px #221a3366;
  --focus-ring: 0 0 0 2px #221a33, 0 0 0 4px #33e672;
}
.text-hero { font-family: var(--font-display); font-size: 67px; line-height: 72px; font-weight: 400; letter-spacing: -0.01em; }
.text-h1 { font-family: var(--font-display); font-size: 42px; line-height: 50px; font-weight: 400; letter-spacing: -0.01em; }
.text-h2 { font-family: var(--font-display); font-size: 32px; line-height: 40px; font-weight: 400; }
.text-h3 { font-family: var(--font-display); font-size: 24px; line-height: 32px; font-weight: 500; }
.text-subheading { font-family: var(--font-display); font-size: 20px; line-height: 1.35; font-weight: 500; }
.text-body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.text-body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 30px; font-weight: 400; }
.text-body-sm { font-family: var(--font-sans); font-size: 13px; line-height: 20px; font-weight: 400; }
.text-button { font-family: var(--font-mono); font-size: 15px; line-height: 20px; font-weight: 400; }
.text-label { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.02em; }
.text-code { font-family: var(--font-code); font-size: 13px; line-height: 20px; font-weight: 400; }