/*
 Theme Name:   HWD Child Theme
 Description:  Holistic Website Designs child theme
 Author:       Paul Good
 Author URI:   https://holisticwebsitedesigns.com/
 Template:     Divi
 Version:      1.5
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  divi-child-theme
*/


/* Add CSS below this line */

/* ------------------------------------------------------------
   Layout + UI
------------------------------------------------------------ */

.cpg-container {
  max-width: 700px;
  margin: 2rem auto;
  font-family: system-ui, sans-serif;
  padding: 1rem;
}

.cpg-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

#cpg-generate-btn {
  padding: 0.5rem 1rem;
  border: none;
  background: #444;
  color: white;
  border-radius: 6px;
  cursor: pointer;
}

#cpg-generate-btn:hover {
  background: #222;
}

.cpg-palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 1.5rem;
}

/* ------------------------------------------------------------
   Swatch Component
------------------------------------------------------------ */

.cpg-swatch {
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  background: #fafafa;
  display: flex;
  flex-direction: column;
}

.cpg-color-box {
  height: 70px;
  width: 100%;
}

.cpg-labels {
  padding: 0.5rem;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cpg-hex {
  font-weight: 600;
}

.cpg-tw {
  opacity: 0.7;
}

/* ------------------------------------------------------------
   CSS Output
------------------------------------------------------------ */

#cpg-cssOutput {
  width: 100%;
  padding: 1rem;
  font-family: monospace;
  border-radius: 6px;
  border: 1px solid #ccc;
}

/* ------------------------------------------------------------
   Utility Classes (Your Original System, Cleaned)
------------------------------------------------------------ */

/* Background Colors */
.bg-color-1  { background-color: var(--color-50); }
.bg-color-2  { background-color: var(--color-100); }
.bg-color-3  { background-color: var(--color-200); }
.bg-color-4  { background-color: var(--color-300); }
.bg-color-5  { background-color: var(--color-400); }
.bg-color-6  { background-color: var(--color-500); }
.bg-color-7  { background-color: var(--color-600); }
.bg-color-8  { background-color: var(--color-700); }
.bg-color-9  { background-color: var(--color-800); }
.bg-color-10 { background-color: var(--color-900); }

/* Text Colors */
.text-color-1  { color: var(--color-50); }
.text-color-2  { color: var(--color-100); }
.text-color-3  { color: var(--color-200); }
.text-color-4  { color: var(--color-300); }
.text-color-5  { color: var(--color-400); }
.text-color-6  { color: var(--color-500); }
.text-color-7  { color: var(--color-600); }
.text-color-8  { color: var(--color-700); }
.text-color-9  { color: var(--color-800); }
.text-color-10 { color: var(--color-900); }

/* Border Colors */
.border-color-1  { border-color: var(--color-50); }
.border-color-2  { border-color: var(--color-100); }
.border-color-3  { border-color: var(--color-200); }
.border-color-4  { border-color: var(--color-300); }
.border-color-5  { border-color: var(--color-400); }
.border-color-6  { border-color: var(--color-500); }
.border-color-7  { border-color: var(--color-600); }
.border-color-8  { border-color: var(--color-700); }
.border-color-9  { border-color: var(--color-800); }
.border-color-10 { border-color: var(--color-900); }

/* Accent System */
.accent-primary        { color: var(--color-500); }
.bg-accent-primary     { background-color: var(--color-500); }
.border-accent-primary { border-color: var(--color-500); }

.accent-secondary        { color: var(--color-700); }
.bg-accent-secondary     { background-color: var(--color-700); }
.border-accent-secondary { border-color: var(--color-700); }

.accent-tertiary        { color: var(--color-300); }
.bg-accent-tertiary     { background-color: var(--color-300); }
.border-accent-tertiary { border-color: var(--color-300); }

/* Accent States */
.accent-hover:hover {
  background-color: var(--color-600);
  color: #fff;
}

.accent-focus:focus {
  outline: 3px solid var(--color-400);
  outline-offset: 2px;
}

.accent-active:active {
  background-color: var(--color-800);
}

/* Helpers */
.rounded { border-radius: 6px; }
.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.p-4 { padding: 2rem;}

.cpg-export-buttons {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.cpg-export-buttons button {
  padding: 0.5rem 1rem;
  border: none;
  background: #666;
  color: white;
  border-radius: 6px;
  cursor: pointer;
}

.cpg-export-buttons button:hover {
  background: #444;
}