/**
 * farmstead360-brand.css
 * Official Farmstead360 Design System
 * Based on Brand Style Guide v1.0 — 2026
 * Single source of truth for all UI colors, typography, and tokens.
 * Drop this file on Claude at the start of any UI session.
 */

/* ============================================================
   COLOR TOKENS
   ============================================================ */

:root {
  /* Primary — Deep Forest Green */
  --fs-green-deep:    #2D6A4F;   /* CTAs, headers, backgrounds, section fills */
  --fs-green-deep-hv: #235840;   /* Hover state for deep green elements */

  /* Secondary — Medium Green */
  --fs-green-mid:     #52B788;   /* Accents, highlights, icons, borders */
  --fs-green-mid-hv:  #3ea070;   /* Hover state for medium green elements */

  /* Background tint — Light Green */
  --fs-green-light:   #D8F3DC;   /* Card backgrounds, section backgrounds, callout fills */

  /* Accent — Warm Amber */
  --fs-amber:         #F4A261;   /* "360" in logo/wordmark, badges, callout labels, highlights */
  --fs-amber-hv:      #e08c4a;   /* Hover state for amber elements */

  /* Structure — Navy Blue */
  --fs-navy:          #1B3A5C;   /* Body text, borders, table headers, structural elements */
  --fs-navy-light:    #2d5580;   /* Lighter navy for secondary text */

  /* Canvas */
  --fs-white:         #FFFFFF;   /* Page backgrounds, reversed text on dark backgrounds */
  --fs-off-white:     #F8FAF8;   /* Subtle background alternate */

  /* Utility */
  --fs-border:        #C8E6C9;   /* Default border color */
  --fs-muted:         #6B8F7A;   /* Muted/secondary text */
  --fs-error:         #D64045;   /* Error states */
  --fs-success:       #2D6A4F;   /* Success states (same as deep green) */
  --fs-warning:       #F4A261;   /* Warning states (same as amber) */
}


/* ============================================================
   TYPOGRAPHY TOKENS
   ============================================================ */

:root {
  /* Font families */
  --fs-font-display: 'Montserrat', 'Inter', sans-serif;  /* Headlines, hero text */
  --fs-font-body:    'Inter', sans-serif;                 /* Body, UI text */

  /* Font weights */
  --fs-weight-light:    300;   /* Labels, tags, subtle callouts */
  --fs-weight-regular:  400;   /* Body copy, descriptions */
  --fs-weight-medium:   500;   /* UI text emphasis */
  --fs-weight-semibold: 600;   /* Subheadings */
  --fs-weight-bold:     700;   /* Headlines, CTAs */

  /* Font sizes */
  --fs-text-xs:   0.75rem;    /* 12px — fine print, legal */
  --fs-text-sm:   0.875rem;   /* 14px — labels, captions */
  --fs-text-base: 1rem;       /* 16px — body default */
  --fs-text-lg:   1.125rem;   /* 18px — large body */
  --fs-text-xl:   1.25rem;    /* 20px — small heading */
  --fs-text-2xl:  1.5rem;     /* 24px — section heading */
  --fs-text-3xl:  1.875rem;   /* 30px — page heading */
  --fs-text-4xl:  2.25rem;    /* 36px — hero subheading */
  --fs-text-5xl:  3rem;       /* 48px — hero heading */

  /* Line heights */
  --fs-leading-tight:  1.2;
  --fs-leading-snug:   1.375;
  --fs-leading-normal: 1.5;
  --fs-leading-relaxed:1.625;
  --fs-leading-loose:  1.75;

  /* Letter spacing */
  --fs-tracking-tight:  -0.025em;
  --fs-tracking-normal:  0;
  --fs-tracking-wide:    0.025em;
  --fs-tracking-wider:   0.05em;
  --fs-tracking-widest:  0.1em;
}


/* ============================================================
   SPACING & LAYOUT TOKENS
   ============================================================ */

:root {
  --fs-space-1:  0.25rem;   /* 4px */
  --fs-space-2:  0.5rem;    /* 8px */
  --fs-space-3:  0.75rem;   /* 12px */
  --fs-space-4:  1rem;      /* 16px */
  --fs-space-5:  1.25rem;   /* 20px */
  --fs-space-6:  1.5rem;    /* 24px */
  --fs-space-8:  2rem;      /* 32px */
  --fs-space-10: 2.5rem;    /* 40px */
  --fs-space-12: 3rem;      /* 48px */
  --fs-space-16: 4rem;      /* 64px */
  --fs-space-20: 5rem;      /* 80px */

  --fs-radius-sm: 6px;
  --fs-radius:    10px;
  --fs-radius-lg: 16px;
  --fs-radius-xl: 24px;
  --fs-radius-full: 9999px;

  --fs-shadow-sm: 0 1px 3px rgba(27,58,92,0.08);
  --fs-shadow:    0 4px 12px rgba(27,58,92,0.10);
  --fs-shadow-lg: 0 8px 24px rgba(27,58,92,0.14);

  --fs-max-width: 1200px;
  --fs-content-width: 760px;
}


/* ============================================================
   BASE RESET
   ============================================================ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--fs-white);
  color: var(--fs-navy);
  font-family: var(--fs-font-body);
  font-size: var(--fs-text-base);
  font-weight: var(--fs-weight-regular);
  line-height: var(--fs-leading-normal);
  -webkit-font-smoothing: antialiased;
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fs-font-display);
  font-weight: var(--fs-weight-bold);
  color: var(--fs-navy);
  line-height: var(--fs-leading-tight);
}

h1 { font-size: var(--fs-text-5xl); }
h2 { font-size: var(--fs-text-4xl); }
h3 { font-size: var(--fs-text-3xl); }
h4 { font-size: var(--fs-text-2xl); }
h5 { font-size: var(--fs-text-xl); }
h6 { font-size: var(--fs-text-lg); }

/* Hero headline */
.fs-hero-title {
  font-family: var(--fs-font-display);
  font-weight: var(--fs-weight-bold);
  font-size: clamp(2.5rem, 6vw, 4rem);
  color: var(--fs-navy);
  line-height: var(--fs-leading-tight);
  letter-spacing: var(--fs-tracking-tight);
}

/* The "360" amber accent in wordmark */
.fs-wordmark-accent { color: var(--fs-amber); }

/* Section heading */
.fs-section-title {
  font-family: var(--fs-font-display);
  font-weight: var(--fs-weight-bold);
  font-size: var(--fs-text-3xl);
  color: var(--fs-green-deep);
}

/* Body text */
p { line-height: var(--fs-leading-relaxed); }

.fs-text-muted {
  color: var(--fs-muted);
  font-size: var(--fs-text-sm);
}

/* Labels / tags */
.fs-label {
  font-family: var(--fs-font-body);
  font-weight: var(--fs-weight-light);
  font-size: var(--fs-text-sm);
  letter-spacing: var(--fs-tracking-wider);
  color: var(--fs-muted);
  text-transform: lowercase;
}

/* ai-enabled tagline */
.fs-tagline {
  font-family: var(--fs-font-body);
  font-weight: var(--fs-weight-light);
  font-size: var(--fs-text-sm);
  color: var(--fs-green-mid);
  letter-spacing: var(--fs-tracking-wide);
}


/* ============================================================
   BUTTONS
   ============================================================ */

.fs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-space-2);
  font-family: var(--fs-font-body);
  font-weight: var(--fs-weight-medium);
  font-size: var(--fs-text-base);
  border-radius: var(--fs-radius);
  padding: var(--fs-space-3) var(--fs-space-6);
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
}

.fs-btn:active { transform: scale(0.98); }

/* Primary CTA */
.fs-btn-primary {
  background: var(--fs-green-deep);
  color: var(--fs-white);
}
.fs-btn-primary:hover {
  background: var(--fs-green-deep-hv);
  box-shadow: var(--fs-shadow);
}

/* Secondary */
.fs-btn-secondary {
  background: var(--fs-white);
  color: var(--fs-green-deep);
  border: 2px solid var(--fs-green-deep);
}
.fs-btn-secondary:hover {
  background: var(--fs-green-light);
}

/* Amber accent CTA */
.fs-btn-amber {
  background: var(--fs-amber);
  color: var(--fs-white);
}
.fs-btn-amber:hover {
  background: var(--fs-amber-hv);
  box-shadow: var(--fs-shadow);
}

/* Ghost */
.fs-btn-ghost {
  background: transparent;
  color: var(--fs-navy);
  border: 1px solid var(--fs-border);
}
.fs-btn-ghost:hover { background: var(--fs-green-light); }


/* ============================================================
   CARDS
   ============================================================ */

.fs-card {
  background: var(--fs-white);
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius);
  padding: var(--fs-space-6);
  box-shadow: var(--fs-shadow-sm);
}

.fs-card-green {
  background: var(--fs-green-light);
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius);
  padding: var(--fs-space-6);
}

.fs-card-dark {
  background: var(--fs-green-deep);
  color: var(--fs-white);
  border-radius: var(--fs-radius);
  padding: var(--fs-space-6);
}

.fs-card-title {
  font-family: var(--fs-font-display);
  font-weight: var(--fs-weight-semibold);
  font-size: var(--fs-text-lg);
  color: var(--fs-green-deep);
  margin-bottom: var(--fs-space-2);
  text-transform: uppercase;
  letter-spacing: var(--fs-tracking-wide);
}

.fs-card-dark .fs-card-title { color: var(--fs-green-mid); }


/* ============================================================
   NAVIGATION / TOPBAR
   ============================================================ */

.fs-topbar {
  background: var(--fs-white);
  border-bottom: 1px solid var(--fs-border);
  padding: var(--fs-space-4) var(--fs-space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fs-topbar-dark {
  background: var(--fs-green-deep);
  padding: var(--fs-space-4) var(--fs-space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fs-wordmark {
  font-family: var(--fs-font-display);
  font-weight: var(--fs-weight-bold);
  font-size: var(--fs-text-2xl);
  color: var(--fs-navy);
  text-decoration: none;
}

.fs-topbar-dark .fs-wordmark { color: var(--fs-white); }


/* ============================================================
   BADGES & STATUS
   ============================================================ */

.fs-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-text-xs);
  font-weight: var(--fs-weight-medium);
  padding: 2px var(--fs-space-2);
  border-radius: var(--fs-radius-full);
}

.fs-badge-green  { background: var(--fs-green-light); color: var(--fs-green-deep); }
.fs-badge-amber  { background: #FEF0E6; color: var(--fs-amber); }
.fs-badge-navy   { background: var(--fs-navy); color: var(--fs-white); }
.fs-badge-muted  { background: #F0F4F0; color: var(--fs-muted); }

/* Order status */
.fs-status-pending    { background: #FEF0E6; color: #C07A3A; }
.fs-status-confirmed  { background: var(--fs-green-light); color: var(--fs-green-deep); }
.fs-status-processing { background: #E8F4FD; color: #2E6DA4; }
.fs-status-fulfilled  { background: #EAF7EA; color: #2D6A2D; }
.fs-status-cancelled  { background: #FDE8E8; color: #C0392B; }


/* ============================================================
   FORMS & INPUTS
   ============================================================ */

.fs-input {
  width: 100%;
  background: var(--fs-white);
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius-sm);
  padding: var(--fs-space-3) var(--fs-space-4);
  font-family: var(--fs-font-body);
  font-size: var(--fs-text-base);
  color: var(--fs-navy);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.fs-input:focus {
  border-color: var(--fs-green-mid);
  box-shadow: 0 0 0 3px rgba(82,183,136,0.15);
}

.fs-input::placeholder { color: var(--fs-muted); }

.fs-label-text {
  display: block;
  font-size: var(--fs-text-sm);
  font-weight: var(--fs-weight-medium);
  color: var(--fs-navy);
  margin-bottom: var(--fs-space-1);
}


/* ============================================================
   TABLES
   ============================================================ */

.fs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-text-sm);
}

.fs-table th {
  background: var(--fs-green-deep);
  color: var(--fs-white);
  font-family: var(--fs-font-display);
  font-weight: var(--fs-weight-semibold);
  text-align: left;
  padding: var(--fs-space-3) var(--fs-space-4);
  font-size: var(--fs-text-sm);
}

.fs-table td {
  padding: var(--fs-space-3) var(--fs-space-4);
  border-bottom: 1px solid var(--fs-border);
  color: var(--fs-navy);
}

.fs-table tr:nth-child(even) td { background: var(--fs-green-light); }
.fs-table tr:hover td { background: var(--fs-off-white); }


/* ============================================================
   ALERTS & CALLOUTS
   ============================================================ */

.fs-alert {
  border-radius: var(--fs-radius-sm);
  padding: var(--fs-space-4) var(--fs-space-5);
  font-size: var(--fs-text-sm);
  border-left: 4px solid;
}

.fs-alert-success { background: var(--fs-green-light); border-color: var(--fs-green-deep); color: var(--fs-green-deep); }
.fs-alert-warning { background: #FEF0E6; border-color: var(--fs-amber); color: #8B5E2F; }
.fs-alert-error   { background: #FDE8E8; border-color: var(--fs-error); color: var(--fs-error); }
.fs-alert-info    { background: #E8F4FD; border-color: #2E6DA4; color: #2E6DA4; }


/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

.fs-container {
  max-width: var(--fs-max-width);
  margin: 0 auto;
  padding: 0 var(--fs-space-6);
}

.fs-section {
  padding: var(--fs-space-16) 0;
}

.fs-section-dark {
  background: var(--fs-green-deep);
  color: var(--fs-white);
  padding: var(--fs-space-16) 0;
}

.fs-section-tint {
  background: var(--fs-green-light);
  padding: var(--fs-space-16) 0;
}

.fs-divider {
  width: 48px;
  height: 4px;
  background: var(--fs-amber);
  border-radius: 2px;
  margin: var(--fs-space-4) 0;
}

.fs-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--fs-space-6); }
.fs-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fs-space-6); }
.fs-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--fs-space-6); }

@media (max-width: 768px) {
  .fs-grid-2, .fs-grid-3, .fs-grid-4 { grid-template-columns: 1fr; }
}


/* ============================================================
   STAT CARDS (dashboard)
   ============================================================ */

.fs-stat-card {
  background: var(--fs-white);
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius);
  padding: var(--fs-space-6);
  border-top: 3px solid var(--fs-green-deep);
}

.fs-stat-value {
  font-family: var(--fs-font-display);
  font-weight: var(--fs-weight-bold);
  font-size: var(--fs-text-4xl);
  color: var(--fs-green-deep);
  line-height: 1;
}

.fs-stat-label {
  font-size: var(--fs-text-sm);
  color: var(--fs-muted);
  margin-top: var(--fs-space-1);
}


/* ============================================================
   STOREFRONT COMPONENTS
   ============================================================ */

.fs-product-card {
  background: var(--fs-white);
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}

.fs-product-card:hover {
  box-shadow: var(--fs-shadow-lg);
  transform: translateY(-2px);
}

.fs-product-price {
  font-family: var(--fs-font-display);
  font-weight: var(--fs-weight-bold);
  font-size: var(--fs-text-xl);
  color: var(--fs-green-deep);
}

.fs-product-badge {
  background: var(--fs-amber);
  color: var(--fs-white);
  font-size: var(--fs-text-xs);
  font-weight: var(--fs-weight-medium);
  padding: 2px var(--fs-space-2);
  border-radius: var(--fs-radius-full);
  text-transform: uppercase;
  letter-spacing: var(--fs-tracking-wider);
}


/* ============================================================
   FOOTER
   ============================================================ */

.fs-footer {
  background: var(--fs-navy);
  color: var(--fs-green-light);
  padding: var(--fs-space-12) 0 var(--fs-space-6);
  font-size: var(--fs-text-sm);
}

.fs-footer a {
  color: var(--fs-green-mid);
  text-decoration: none;
}

.fs-footer a:hover { color: var(--fs-white); }


/* ============================================================
   FORM COMPONENTS — Onboarding & Back Office
   ============================================================ */

.fs-field {
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-1);
  margin-bottom: var(--fs-space-4);
}

.fs-hint {
  font-size: var(--fs-text-xs);
  color: var(--fs-muted);
  margin-top: var(--fs-space-1);
}

.fs-field-error {
  font-size: var(--fs-text-xs);
  color: var(--fs-error);
  margin-top: var(--fs-space-1);
}


/* ============================================================
   UTILITY — Color tokens missing from original
   ============================================================ */

:root {
  --fs-blue:          #4e8baa;   /* Farmstead360 blue — step indicators, links */
  --fs-blue-hv:       #3a7291;   /* Hover state */
  --fs-red:           #D64045;   /* Alias for --fs-error */
}