/* GENERADO, no editar a mano.
   Snapshot literal de mb-studio/assets/design-system/tokens.css (design system de Mate & Build).
   Regenerar: node scripts/sync-tokens.js --write · Overrides propios: assets/css/brand.css
   Snapshot 2026-09-13 */

/* Design Tokens - Auto-generated */
/* Do not edit directly - modify tokens.json instead */

/* === PRIMITIVES === */
:root {
  --primitive-color-cream-base: #F4F0E8;
  --primitive-color-cream-alt: #EDE9DF;
  --primitive-color-white-off: #FDFCF9;
  --primitive-color-ink-500: #6B7280;
  --primitive-color-ink-700: #374151;
  --primitive-color-ink-900: #111827;
  --primitive-color-sand-border: #E2DDD4;
  --primitive-color-green-base: #3A7D5C;
  --primitive-color-green-dark: #295841;
  --primitive-color-orange-cta: #FF6B35;
  --primitive-font-display: 'Outfit', sans-serif;
  --primitive-font-body: 'Inter', sans-serif;
  --primitive-radius-sm: 8px;
  --primitive-radius-md: 16px;
  --primitive-radius-lg: 20px;
  --primitive-radius-xl: 24px;
  --primitive-radius-pill: 100px;
  --primitive-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --primitive-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --primitive-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --primitive-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* === SEMANTIC === */
:root {
  --color-bg: #F4F0E8;
  --color-bg-alt: #EDE9DF;
  --color-surface: #FDFCF9;
  --color-text: #111827;
  --color-text-secondary: #374151;
  --color-text-muted: #6B7280;
  --color-border: #E2DDD4;
  --color-primary: #3A7D5C;
  --color-primary-dark: #295841;
  --color-cta: #FF6B35;
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --cream: #F4F0E8;
  --cream2: #EDE9DF;
  --white: #FDFCF9;
  --ink: #111827;
  --ink2: #374151;
  --muted: #6B7280;
  --border: #E2DDD4;
  --green: #3A7D5C;
  --green-dark: #295841;
  --cta-orange: #FF6B35;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* === COMPONENTS === */
:root {
  --card-bg: #FDFCF9;
  --card-border: #E2DDD4;
  --card-radius: 20px;
  --eyebrow-color: #3A7D5C;
  --eyebrow-bg: rgba(58, 125, 92, 0.1);
  --eyebrow-radius: 100px;
  --btn-bg: #3A7D5C;
  --btn-bg-hover: #295841;
  --btn-radius: 100px;
}