/* vine.farm brand palette v1 — 2026-11-04
   Apply semantic tokens across pages, not literal hex values in components.
   Main headings: deep teal; decorative accents: mint; primary CTA: coral.
*/
:root {
  /* Brand */
  --brand-teal-deep: #145C59;
  --brand-teal: #328F88;
  --brand-teal-soft: #E5F2ED;
  --brand-coral: #C65B44;
  --brand-coral-action: #B44B35; /* white text contrast > 4.5:1 */
  --brand-coral-hover: #963C2B;
  
  /* Nature, informational accents */
  --brand-olive: #8AA65A;
  --brand-sand: #E6C49A;

  /* Neutrals */
  --surface-paper: #F6EFE6;
  --surface-card: #FFFCF6;
  --surface-mint: #E5F2ED;
  --text-primary: #193536;
  --text-secondary: #536361;
  --border-subtle: #E5DCD0;

  /* Semantic UI roles */
  --color-brand: var(--brand-teal-deep);
  --color-heading: var(--brand-teal-deep);
  --color-link: var(--brand-teal-deep);
  --color-icon: var(--brand-teal);
  --color-focus: var(--brand-teal);
  --color-primary-button: var(--brand-coral-action);
  --color-primary-button-hover: var(--brand-coral-hover);
  --color-primary-button-text: #FFFFFF;
  --color-secondary-button-border: var(--brand-teal-deep);
  --color-secondary-button-text: var(--brand-teal-deep);
  --color-success: #607C3F;
  --color-warning: #AD651F;
  --color-error: #A43E37;
  --color-background: var(--surface-paper);
  --color-card: var(--surface-card);
  --color-text: var(--text-primary);
  --color-muted: var(--text-secondary);
  --color-border: var(--border-subtle);
}

/* Usage examples:
.hero-title { color: var(--color-heading); }
.button-primary { background: var(--color-primary-button); color: var(--color-primary-button-text); }
.button-primary:hover { background: var(--color-primary-button-hover); }
.icon { color: var(--color-icon); }
.card { background: var(--color-card); border: 1px solid var(--color-border); }
*/