/* Sonoma Botanicals Design System — generated from tokens.json */
@font-face{font-family:"Gloock";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Gloock-400.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/Outfit-300-700.woff2") format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/DMMono-400.woff2") format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/DMMono-500.woff2") format("woff2")}
:root, [data-theme="light"] {
  --garden-50: #f0f5eb;
  --garden-100: #e1ebd9;
  --garden-200: #c7d9bc;
  --garden-300: #a9c6a0;
  --garden-400: #7fa579;
  --garden-500: #5a8a5c;
  --garden-600: #3f6b45;
  --garden-700: #2f5236;
  --garden-800: #28432f;
  --garden-900: #1f3325;
  --calendula-50: #fef7e8;
  --calendula-100: #fbebcb;
  --calendula-200: #f7daa0;
  --calendula-300: #f2c878;
  --calendula-400: #edb352;
  --calendula-500: #e39b2d;
  --calendula-600: #c97d1f;
  --calendula-700: #a8651a;
  --calendula-800: #7f4b16;
  --clay-50: #fbf1ec;
  --clay-100: #f6ddd2;
  --clay-200: #edbba7;
  --clay-300: #df957a;
  --clay-400: #cf7556;
  --clay-500: #c4633f;
  --clay-600: #b4553a;
  --clay-700: #9e3f2a;
  --clay-800: #7a2f20;
  --lavender-100: #ece8f2;
  --lavender-300: #bfb3d1;
  --lavender-500: #8c7ba8;
  --lavender-700: #5e4f78;
  --paper: #fbf8f1;
  --linen-100: #f4f0e6;
  --linen-200: #eae3d3;
  --linen-300: #d8cfbb;
  --stone-400: #b0a78f;
  --stone-500: #8c8472;
  --stone-600: #6b6455;
  --loam-700: #4a443a;
  --loam-800: #3a352c;
  --ink-900: #2a2723;
  --logo-panel: #f0efec;
  --white: #ffffff;
  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-sunken: var(--linen-100);
  --surface-muted: var(--linen-200);
  --surface-brand: var(--garden-700);
  --surface-brand-deep: var(--garden-900);
  --surface-accent: var(--calendula-100);
  --surface-inverse: var(--ink-900);
  --text-heading: var(--ink-900);
  --text-body: var(--loam-700);
  --text-muted: var(--stone-600);
  --text-subtle: var(--stone-500);
  --text-on-brand: var(--paper);
  --text-on-accent: var(--ink-900);
  --text-link: var(--garden-700);
  --text-link-hover: var(--clay-600);
  --text-brand: var(--garden-700);
  --text-accent: var(--calendula-700);
  --border-subtle: var(--linen-200);
  --border-default: var(--linen-300);
  --border-strong: var(--stone-500);
  --border-ink: var(--ink-900);
  --border-focus: var(--garden-600);
  --action-primary: var(--garden-700);
  --action-primary-hover: var(--garden-800);
  --action-primary-press: var(--garden-900);
  --action-accent: var(--calendula-500);
  --action-accent-hover: var(--calendula-600);
  --status-success: var(--garden-600);
  --status-success-bg: var(--garden-50);
  --status-warning: var(--calendula-700);
  --status-warning-bg: var(--calendula-50);
  --status-danger: var(--clay-700);
  --status-danger-bg: var(--clay-50);
  --status-info: var(--lavender-700);
  --status-info-bg: var(--lavender-100);
  --required: var(--clay-600);
  --shadow-xs: 0 1px 2px rgba(58,53,44,.06);
  --shadow-sm: 0 2px 6px rgba(58,53,44,.07), 0 1px 2px rgba(58,53,44,.05);
  --shadow-md: 0 10px 24px -8px rgba(58,53,44,.14), 0 2px 6px rgba(58,53,44,.06);
  --shadow-lg: 0 24px 48px -16px rgba(40,67,47,.22), 0 4px 12px rgba(58,53,44,.06);
}
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --frame-inset: 5px;
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --container-max: 1160px;
  --container-narrow: 760px;
  --container-form: 600px;
  --gutter: 24px;
  --header-h: 72px;
  --infobar-h: 36px;
  --fs-display-xl: 72px;
  --fs-display-lg: 56px;
  --fs-display-md: 44px;
  --fs-h1: 36px;
  --fs-h2: 30px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-lead: 20px;
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;
  --fs-mono: 14px;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.08;
  --lh-heading: 1.18;
  --lh-snug: 1.35;
  --lh-body: 1.6;
  --lh-loose: 1.8;
  --ls-display: -0.01em;
  --ls-normal: 0;
  --ls-caps: 0.18em;
  --ls-caps-wide: 0.28em;
  --ls-button: 0.08em;
  --font-display: "Gloock", "Georgia", serif;
  --font-sans: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", "SFMono-Regular", Menlo, monospace;
}
.display { font-family: var(--font-display); font-size: 56px; line-height: 1.08; font-weight: 400; }
.h1 { font-family: var(--font-display); font-size: 36px; line-height: 1.18; font-weight: 400; }
.h2 { font-family: var(--font-display); font-size: 30px; line-height: 1.18; font-weight: 400; }
.h3 { font-family: var(--font-display); font-size: 24px; line-height: 1.35; font-weight: 400; }
.h4 { font-family: var(--font-sans); font-size: 20px; line-height: 1.35; font-weight: 500; }
.lead { font-family: var(--font-sans); font-size: 20px; line-height: 1.6; font-weight: 300; }
.body { font-family: var(--font-sans); font-size: 17px; line-height: 1.6; font-weight: 400; }
.small { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 1.45; font-weight: 400; }
.eyebrow { font-family: var(--font-sans); font-size: 12px; line-height: 1.2; font-weight: 500; }
.button { font-family: var(--font-sans); font-size: 14px; line-height: 1; font-weight: 500; }
.mono { font-family: var(--font-mono); font-size: 14px; line-height: 1.5; font-weight: 400; }