/* ============================================================
   Missouri Topsoil Co. -- Custom Properties & Overrides
   Material Design 3 color system (via Google Stitch)
   ============================================================ */

:root {
  /* --- M3 Primary tones ------------------------------------------------- */
  --color-primary:             #432a1e;
  --color-primary-container:   #5c4033;
  --color-on-primary:          #ffffff;
  --color-on-primary-container:#d3ac9c;
  --color-primary-fixed:       #ffdbcc;
  --color-primary-fixed-dim:   #e6bead;

  /* --- M3 Secondary tones ----------------------------------------------- */
  --color-secondary:             #3b6934;
  --color-secondary-container:   #b9eeab;
  --color-on-secondary:          #ffffff;
  --color-on-secondary-container:#3f6d38;
  --color-secondary-fixed:       #bcf0ae;
  --color-secondary-fixed-dim:   #a1d494;

  /* --- M3 Tertiary tones ------------------------------------------------ */
  --color-tertiary:            #402d00;
  --color-tertiary-container:  #5b4300;
  --color-on-tertiary:         #ffffff;
  --color-on-tertiary-container:#dbaf49;
  --color-tertiary-fixed:      #ffdf9f;
  --color-tertiary-fixed-dim:  #eec058;

  /* --- M3 Surface tones ------------------------------------------------- */
  --color-background:                #fdf9f4;
  --color-on-background:             #1c1c19;
  --color-surface:                   #fdf9f4;
  --color-on-surface:                #1c1c19;
  --color-on-surface-variant:        #504440;
  --color-surface-variant:           #e6e2dd;
  --color-surface-bright:            #fdf9f4;
  --color-surface-dim:               #ddd9d5;
  --color-surface-container-lowest:  #ffffff;
  --color-surface-container-low:     #f7f3ee;
  --color-surface-container:         #f1ede8;
  --color-surface-container-high:    #ebe8e3;
  --color-surface-container-highest: #e6e2dd;
  --color-surface-tint:              #765749;

  /* --- M3 Outline ------------------------------------------------------- */
  --color-outline:         #82746f;
  --color-outline-variant: #d4c3bd;

  /* --- M3 Inverse ------------------------------------------------------- */
  --color-inverse-surface:    #31302d;
  --color-inverse-on-surface: #f4f0eb;
  --color-inverse-primary:    #e6bead;

  /* --- M3 Error --------------------------------------------------------- */
  --color-error:              #ba1a1a;
  --color-on-error:           #ffffff;
  --color-error-container:    #ffdad6;
  --color-on-error-container: #93000a;

  /* --- Legacy aliases (used across existing templates) ------------------ */
  --color-accent:  #D4A843;
  --color-bg:      #fdf9f4;
  --color-text:    #1c1c19;
}

body {
  background-color: var(--color-background);
  color: var(--color-on-background);
}

/* --- Material Symbols ---------------------------------------------------- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  line-height: 1;
}

/* --- Seasonal banner ---------------------------------------------------- */
.seasonal-banner {
  background-color: var(--color-accent);
  color: var(--color-text);
}

/* --- Service-area pill badges ------------------------------------------- */
.pill-badge {
  display: inline-block;
  padding: 0.375rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--color-accent);
  color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
}

/* --- Soil-type badge ---------------------------------------------------- */
.badge-pulverized {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  background-color: color-mix(in srgb, var(--color-secondary) 15%, transparent);
  color: var(--color-secondary);
}

.badge-raw {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary);
}

/* --- Flash messages ----------------------------------------------------- */
.flash-success {
  background-color: color-mix(in srgb, var(--color-secondary) 12%, transparent);
  border-left: 4px solid var(--color-secondary);
  color: var(--color-secondary);
}

.flash-error {
  background-color: var(--color-error-container);
  border-left: 4px solid var(--color-error);
  color: var(--color-on-error-container);
}

.flash-info {
  background-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
  border-left: 4px solid var(--color-accent);
  color: var(--color-primary);
}