/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Cutter Factory Brand Colors */
:root {
  --cf-charcoal-blue: #3D4450;
  --cf-inky-blue: #3A5F8C;
  --cf-mindful-gray: #BCB7AD;
  --cf-snowbound: #EDEAE5;
  --cf-favorite-jeans: #5D7899;
  --cf-copper-pot: #B16A37;
}

/* Brand Color Utilities */
.bg-cf-copper { background-color: var(--cf-copper-pot); }
.text-cf-copper { color: var(--cf-copper-pot); }
.border-cf-copper { border-color: var(--cf-copper-pot); }

.bg-cf-charcoal { background-color: var(--cf-charcoal-blue); }
.text-cf-charcoal { color: var(--cf-charcoal-blue); }

.bg-cf-inky { background-color: var(--cf-inky-blue); }
.text-cf-inky { color: var(--cf-inky-blue); }

.bg-cf-jeans { background-color: var(--cf-favorite-jeans); }
.text-cf-jeans { color: var(--cf-favorite-jeans); }

.bg-cf-snowbound { background-color: var(--cf-snowbound); }
.text-cf-snowbound { color: var(--cf-snowbound); }

/* Copper gradient for special pricing */
.bg-copper-gradient {
  background: linear-gradient(135deg, var(--cf-copper-pot) 0%, #A85A2A 100%);
}

/* Hover effects with copper accents */
.hover-copper-glow:hover {
  box-shadow: 0 0 20px rgba(177, 106, 55, 0.3);
}