/**
 * COLOR-PALETTES.CSS
 * Color Palettes page - Matches amenities.css styling
 */

/* ==========================================================================
   INTRO SECTION
   ========================================================================== */

.contracts-intro {
  padding: var(--space-3xl) 0;
  text-align: center;
}

.contracts-intro h2 {
  margin-bottom: var(--space-md);
}

.contracts-intro p {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 800px;
  margin: 0 auto;
}

/* ==========================================================================
   PAINT COLORS SECTIONS - Alternating layout like amenities
   ========================================================================== */

.contracts-section {
  padding: var(--space-3xl) 0;
}

.contracts-section:nth-child(even) {
  background-color: var(--color-bg-dark);
}

.contracts-section h3 {
  color: var(--color-primary);
  margin-bottom: var(--space-md);
  text-align: center;
}

/* ==========================================================================
   PAINT COLORS GRID
   ========================================================================== */

.paint-colors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

@media (min-width: 576px) {
  .paint-colors-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .paint-colors-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.paint-swatch {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.paint-swatch-color {
  height: 80px;
}

.paint-swatch-label {
  padding: var(--space-sm);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi-bold);
  background-color: var(--color-bg-light);
  color: var(--color-text-primary);
}

/* ==========================================================================
   DISCLAIMER & INTRO TEXT
   ========================================================================== */

.paint-disclaimer {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.paint-colors-intro {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  color: var(--color-text-secondary);
}

/* ==========================================================================
   PAINT BRAND & GROUP HEADINGS
   ========================================================================== */

.paint-brand-label {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.paint-group-heading {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semi-bold);
  color: var(--color-primary);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
}

/* ==========================================================================
   PAINT CODE
   ========================================================================== */

.paint-code {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
  margin-top: 2px;
}

/* ==========================================================================
   APPROVED PAINT COLOR SWATCHES - 2000 Touch-Up Palette
   ========================================================================== */

.swatch-buttonwood { background-color: #A8A090; }
.swatch-pagan { background-color: #9A8E8E; }
.swatch-sorcery { background-color: #8A8088; }
.swatch-dover-gray { background-color: #B0B0A8; }
.swatch-volcanic-ash { background-color: #A0A0A0; }
.swatch-chicago-gray { background-color: #909898; }
.swatch-shylock { background-color: #C8C0B0; }
.swatch-moon-lily { background-color: #D8D0C0; }
.swatch-tumble-weed { background-color: #C0B8A0; }
.swatch-babys-breath { background-color: #C8D0C4; }
.swatch-catbird { background-color: #B8C8B8; }
.swatch-legend { background-color: #A8B8A8; }
.swatch-peachy { background-color: #E0C8B0; }
.swatch-cocoa-bean { background-color: #C8A890; }
.swatch-toned-beige { background-color: #D0C0A8; }
.swatch-taffy { background-color: #B8A890; }
.swatch-antler-brown { background-color: #A89880; }
.swatch-birch-gray { background-color: #C0B8A8; }
.swatch-colonial-blue { background-color: #4A6A8A; }
.swatch-new-aubergine { background-color: #6A4A6A; }
.swatch-catawba { background-color: #8A4A4A; }
.swatch-black-hand-rails { background-color: #2A2A2A; }

/* ==========================================================================
   APPROVED PAINT COLOR SWATCHES - 2016+ Full Repaint Palette
   ========================================================================== */

.swatch-chowder-bowl { background-color: #D8C4A8; }
.swatch-wine-cork { background-color: #C8B090; }
.swatch-spanish-sand { background-color: #D0C0A0; }
.swatch-sassafras-tea { background-color: #D4D0C4; }
.swatch-brierwood-green { background-color: #A8B898; }
.swatch-lodgepole-pines { background-color: #8A9A7A; }
.swatch-san-francisco-fog { background-color: #B8B6B0; }
.swatch-kettleman { background-color: #A8A8A0; }
.swatch-winters-park { background-color: #98A898; }
.swatch-sequoia-fog { background-color: #B8AEA4; }
.swatch-thai-teak { background-color: #A89880; }
.swatch-even-evan { background-color: #C0B8A8; }
.swatch-shrimp-boudin { background-color: #C8B09C; }
.swatch-tamarind-tart { background-color: #B8A080; }
.swatch-presidio-plaza { background-color: #C8B8A0; }
.swatch-dovetail { background-color: #908A84; }
.swatch-navajo-white { background-color: #E0D8C8; }
.swatch-black-fox { background-color: #4A4A4A; }
.swatch-burgundy { background-color: #8A4A4A; }
.swatch-wirework-grey { background-color: #C0B8AC; }
.swatch-lights-out { background-color: #3A3A3A; }
.swatch-great-grey { background-color: #A8A8A0; }

/* ==========================================================================
   APPROVED PAINT COLOR SWATCHES - 2023/2024 Sherwin-Williams
   ========================================================================== */

.swatch-light-french-gray { background-color: #C2C0BB; }
.swatch-marshmallow { background-color: #EEE9E0; }
.swatch-morning-sun { background-color: #F3E6CE; }
.swatch-classic-french-gray { background-color: #888782; }
.swatch-dakota-wheat { background-color: #E1BD8E; }
.swatch-white-truffle { background-color: #D7C8C2; }