/**
 * COLOR-PALETTES.CSS
 * Color Palettes page - Luxury styling
 */

/* ==========================================================================
   INTRO SECTION - Luxury treatment
   ========================================================================== */

.color-intro {
  padding: var(--space-3xl) 0;
  background-color: var(--color-bg-light);
}

.color-intro-lead {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-3xl);
}

.color-intro-eyebrow {
  font-family: var(--font-accent);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semi-bold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-secondary);
  margin-bottom: var(--space-md);
}

.color-intro h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-3xl);
  color: var(--color-primary);
  margin-bottom: var(--space-lg);
  border-bottom: none;
  display: block;
}

.color-intro-sub {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ==========================================================================
   PATH CARDS - Two-column luxury cards
   ========================================================================== */

.color-paths {
  gap: var(--space-xl);
  max-width: 900px;
  margin: 0 auto;
}

.color-path-card {
  position: relative;
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: left;
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.color-path-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.color-path-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-accent-dark), var(--color-accent));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.color-path-card h3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  color: var(--color-primary);
  margin-bottom: var(--space-md);
  margin-top: var(--space-sm);
}

.color-path-card p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.color-path-card p:last-of-type {
  margin-bottom: var(--space-lg);
}

.color-path-card .btn {
  width: 100%;
  text-align: center;
}

/* ==========================================================================
   DOWNLOADS SECTION - Dark background, elevated cards
   ========================================================================== */

.color-downloads {
  padding: var(--space-3xl) 0;
}

.color-downloads h3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

.color-downloads-lead {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   PDF DOWNLOAD CARDS - Luxury treatment
   ========================================================================== */

.pdf-downloads {
  gap: var(--space-xl);
  max-width: 960px;
  margin: 0 auto;
}

.pdf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: var(--space-xl);
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: box-shadow var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal);
}

.pdf-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent);
  transform: translateY(-4px);
  text-decoration: none;
}

.pdf-year {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
}

.pdf-title {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.pdf-desc {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
  line-height: 1.5;
  flex-grow: 1;
}

.pdf-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-primary);
  color: var(--color-bg-light);
  font-family: var(--font-accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.pdf-action::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='12' y1='18' x2='12' y2='12'/%3E%3Cline x1='9' y1='15' x2='15' y2='15'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.pdf-card:hover .pdf-action {
  background-color: var(--color-primary-dark);
}

/* ==========================================================================
   COLOR REFERENCE SECTION
   ========================================================================== */

.color-reference {
  padding: var(--space-3xl) 0;
  background-color: var(--color-bg-light);
}

.color-reference h3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  color: var(--color-primary);
  margin-bottom: var(--space-md);
  text-align: center;
}

.color-reference h4 {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

/* ==========================================================================
   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);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.paint-swatch:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.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: #E1CBAD; }
.swatch-wine-cork { background-color: #C8B090; }
.swatch-spanish-sand { background-color: #CEB090; }
.swatch-sassafras-tea { background-color: #DCD7CA; }
.swatch-brierwood-green { background-color: #566253; }
.swatch-lodgepole-pines { background-color: #ADA58F; }
.swatch-san-francisco-fog { background-color: #C5C3BD; }
.swatch-kettleman { background-color: #606061; }
.swatch-winters-park { background-color: #96928D; }
.swatch-sequoia-fog { background-color: #C5BBAF; }
.swatch-thai-teak { background-color: #634436; }
.swatch-even-evan { background-color: #998272; }
.swatch-shrimp-boudin { background-color: #DBBDA2; }
.swatch-tamarind-tart { background-color: #8E5F4B; }
.swatch-presidio-plaza { background-color: #BD9175; }
.swatch-dovetail { background-color: #908A83; }
.swatch-navajo-white { background-color: #E9DCC6; }
.swatch-black-fox { background-color: #4F4842; }
.swatch-burgundy { background-color: #63333E; }
.swatch-wirework-grey { background-color: #949793; }
.swatch-lights-out { background-color: #969693; }
.swatch-great-grey { background-color: #646A68; }
.swatch-warm-gray-flannel { background-color: #ADA49A; }
.swatch-young-colt { background-color: #938C83; }
.swatch-swiss-coffee { background-color: #F3EFE6; }
.swatch-navy-damask { background-color: #3F5265; }
.swatch-fruityard { background-color: #5F4242; }
.swatch-sea-of-atlantis { background-color: #2E545A; }
.swatch-black-forest-green { background-color: #242E2C; }

/* ==========================================================================
   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; }