/* Supabase brand tokens, from unfairly.ai/brand-guidelines/supabase (checked 2026-10-30).
   Sizes, spacing and components were measured on https://supabase.com/brand-assets (Supabase publishes no PDF guide. Read from supabase.com/brand-assets (logos, 3 colors, name and usage rules), the design system docs at supabase.com/design-system/docs (color usage, typography, icons, copywriting, accessibility, theming, Tailwind classes, layout pattern), the homepage stylesheet's theme tokens, packages/config/typography.css on GitHub, and the homepage and company pages, all fetched 2026-10-30.).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Supabase's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FDFDFD;
  --color-surface: #F8F8F8;
  --color-ink: #030303;
  --color-ink-muted: #696969;
  --color-accent: #0E7E4E;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #3ECF8E;
  --color-night: #1C1C1C;
  --color-on-night: #EDEDED;
  --color-supabase-green: #3ECF8E;
  --color-dark-gray: #1C1C1C;
  --color-light-gray: #F8F8F8;
  --color-primary-light-theme: #0E7E4E;
  --color-logo-gradient-dark-stop: #249361;
  --color-wordmark-ink: #1F1F1F;
  --color-brand-600-light: #097C4F;
  --color-brand-500-light: #16B674;
  --color-brand-400-light: #72E3AD;
  --color-brand-300-light: #A9F1CA;
  --color-brand-200-light: #D3F8E4;
  --color-brand-600-dark: #85E0BA;
  --color-brand-500-dark: #006239;
  --color-brand-400-dark: #00311D;
  --color-gray-dark-100: #161616;
  --color-gray-dark-300: #232323;
  --color-gray-dark-500: #2E2E2E;
  --color-gray-dark-700: #3E3E3E;
  --color-gray-dark-900: #707070;
  --color-gray-dark-1100: #A0A0A0;
  --color-gray-dark-1200: #EDEDED;
  --color-gray-light-100: #FCFCFC;
  --color-gray-light-400: #EDEDED;
  --color-gray-light-600: #E2E2E2;
  --color-gray-light-800: #C7C7C7;
  --color-gray-light-900: #8F8F8F;
  --color-gray-light-1100: #6F6F6F;
  --color-gray-light-1200: #171717;
  --color-secondary: #7A66FF;
  --color-destructive: #E54D2E;
  --color-warning-dark: #DB8E00;
  --color-page-ground-homepage-light: #FDFDFD;
  --color-ink-homepage-light: #030303;
  --color-muted-ink-homepage-light: #696969;
  --color-dark-surface: #141414;
  --color-hairline-rendered: #E9E9E9;
  --color-hairline-on-white: #EBEBEB;
  --color-control-border: #DADADA;
  --color-mockup-frame-border: #E6E6E6;
  --color-card-white: #FFFFFF;
  --color-on-primary-text: #FAFCFB;
  --color-primary-hover: #007243;
  --color-ink-light: #464646;
  --color-input-fill: #F9F9F9;
  --color-muted-10-dot-field: #EEEEEE;
  --color-bg-muted: #F6F6F6;
  --color-mockup-traffic-dots: #D2D2D2;
  --color-brand-default-rendered: #3FCF8E;
  --color-code-keyword: #6B35DC;
  --color-code-identifier: #15593B;
  --color-code-string: #B45309;
  --color-code-plain: #525252;
  --color-mockup-purple-800: #BE93E4;
  --color-mockup-purple-900: #8E4EC6;
  --color-stripe-tint: #635BFF;
  --color-next-js-blue: #0070F3;
  --color-lovable-gradient-0: #FD49A8;
  --color-lovable-gradient-10: #FD2980;
  --color-lovable-gradient-20: #FC1A58;
  --color-lovable-gradient-30: #FA1F41;
  --color-lovable-gradient-40: #FA2733;
  --color-lovable-gradient-50: #FB3D26;
  --color-lovable-gradient-60: #FC541F;
  --color-lovable-gradient-70: #FE6A1E;
  --color-lovable-gradient-80: #FE771D;
  --color-lovable-gradient-90: #FF861B;
  --color-lovable-gradient-100: #FF8F1B;
  --color-exp-realty-panel: #0C0F24;
  --color-phoenix-energy-panel: #002533;
  --color-rally-gradient-start: #444ED4;
  --color-rally-gradient-end: #1A2DCC;
  --color-dark-theme-ground: #131413;
  --color-dark-theme-text: #EDEFEE;
  --color-dark-theme-green: #4ACD8B;
  --color-dark-theme-primary: #006338;
  --color-button-primary-fill: #0E7E4E;
  --color-button-primary-text: #FAFCFB;
  --color-button-secondary-fill: #FFFFFF;
  --color-button-secondary-text: #030303;
  --color-pill-tab-fill: #FDFDFD;
  --color-card-fill: #FFFFFF;
  --color-input-fill: #F9F9F9;
  --font-display: Manrope, Manrope, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: Inter, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Source Code Pro", "Source Code Pro", "Office Code Pro", ui-monospace, Menlo, monospace;
  --page-margin: 176px;
  --section-padding: 96px;
  --container-max: 1280px;
  --card-gap: 12px;
  --nav-height: 65px;
  --grid-gutter: 12px;
  --grid-columns: 12;
  --text-display-size: 46px;
  --text-display-line: 46px;
  --text-display-weight: 500;
  --text-heading-size: 34px;
  --text-heading-line: 37.78px;
  --text-heading-weight: 600;
  --text-quote-size: 22px;
  --text-quote-line: 30.25px;
  --text-quote-weight: 450;
  --text-lead-l-size: 22px;
  --text-lead-l-line: 29.33px;
  --text-lead-l-weight: 450;
  --text-lead-l-tracking: -0.16px;
  --text-title-size: 16px;
  --text-title-line: 24px;
  --text-title-weight: 600;
  --text-footer-heading-size: 15px;
  --text-footer-heading-line: 22.5px;
  --text-footer-heading-weight: 600;
  --text-title-s-size: 14px;
  --text-title-s-line: 20px;
  --text-title-s-weight: 500;
  --text-lead-size: 16px;
  --text-lead-line: 24px;
  --text-lead-weight: 450;
  --text-body-tweet-size: 15px;
  --text-body-tweet-line: 22.5px;
  --text-body-tweet-weight: 450;
  --text-body-size: 14px;
  --text-body-line: 20px;
  --text-body-weight: 450;
  --text-button-size: 14px;
  --text-button-line: 20px;
  --text-button-weight: 500;
  --text-nav-size: 14px;
  --text-nav-line: 16px;
  --text-nav-weight: 500;
  --text-small-size: 12px;
  --text-small-line: 16px;
  --text-small-weight: 500;
  --text-code-size: 13px;
  --text-code-line: 22.1px;
  --text-code-weight: 500;
  --text-eyebrow-size: 12px;
  --text-eyebrow-line: 16px;
  --text-eyebrow-weight: 400;
  --radius-button-primary: 9.29px;
  --radius-button-secondary: 9.29px;
  --radius-pill-tab: 9999px;
  --radius-product-card: 16px;
  --radius-card: 10.67px;
  --radius-input: 8px;
  --icon-default: 24px;
  --icon-inline-usage-sample: 16px;
}
/* Phone values measured at 390px. Supabase's breakpoint wasn't measured: 600px is our default. */
@media (max-width: 600px) {
  :root {
    --page-margin: 24px;
    --section-padding: 64px;
    --text-display-size: 34px;
    --text-heading-size: 22px;
    --text-quote-size: 18px;
    --text-lead-l-size: 18px;
    --text-button-size: 15px;
    --text-nav-size: 15px;
  }
}
.button-primary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 38px; padding: 0 16px; border-radius: 9.29px;
  background: #0E7E4E; color: #FAFCFB;
  font: 500 14px/1 var(--font-body);
}
.button-primary:hover { background-color: #007243; } /* observed */
.button-primary:active { scale: 0.97; } /* observed */
.button-secondary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 38px; padding: 0 16px; border-radius: 9.29px;
  background: #FFFFFF; color: #030303;
  font: 500 14px/1 var(--font-body);
}
.button-secondary:hover { background-color: #F8F8F8; } /* observed */
.button-secondary:active { scale: 0.97; } /* observed */