/* ══════════════════════════════════════════════════════════════
   CapHeadz — Light brand theme (v2)
   Cream/parchment palette, navy + red accents, no gold.
   Shared across all pages. Loads AFTER per-page <style> blocks
   so these tokens win.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Primary palette ── */
  --ch-cream:        #F5EFE2;   /* parchment page bg */
  --ch-cream-deep:   #EFE7D3;   /* subtle alternating section */
  --ch-off-white:    #FAFAF7;   /* clean card/section bg */
  --ch-white:        #FFFFFF;

  --ch-navy:         #1B2A47;   /* ink, headlines, nav */
  --ch-navy-soft:    #2A3A5C;   /* secondary navy */
  --ch-navy-10:      rgba(27,42,71,0.10);
  --ch-navy-20:      rgba(27,42,71,0.20);
  --ch-navy-60:      rgba(27,42,71,0.60);
  --ch-navy-75:      rgba(27,42,71,0.75);

  --ch-red:          #B2242B;   /* brand red — CTAs, accents */
  --ch-red-dark:     #8F1B21;   /* hover */
  --ch-red-bright:   #C02430;   /* legacy alias */

  --ch-forest:       #2F5D3A;   /* rare green accent */
  --ch-rope:         #C9A66B;   /* rare tan accent */

  --ch-charcoal:     #2A2A2A;   /* body text */
  --ch-gray-500:     #8A8A8A;   /* meta text */
  --ch-border:       #E5E1D4;   /* warm hairline borders */

  /* ── Legacy variable overrides ── */
  /* Every page's local :root is overridden by these (brand.css loads after). */
  --boston-blue:     #1B2A47;   /* was #0C1230 dark */
  --chowda-red:      #B2242B;
  --vintage-navy:    #2A3A5C;
  --nauti-blue:      #3C486C;
  --grizzly-gold:    #B2242B;   /* remap gold → red so legacy refs become red accents */
  --marathon-gold:   #B2242B;
  --cape-red:        #B2242B;
  --bright-red:      #8F1B21;
  --gahden-green:    #2F5D3A;
  --white:           #FFFFFF;
  --off-white:       #F5EFE2;   /* cream everywhere the old "off-white" was used */

  /* Shadows */
  --ch-shadow-sm: 0 1px 2px rgba(27,42,71,0.06);
  --ch-shadow-md: 0 4px 16px rgba(27,42,71,0.08);
  --ch-shadow-lg: 0 12px 32px rgba(27,42,71,0.10);

  --ch-radius-sm: 4px;
  --ch-radius-md: 6px;
  --ch-radius-pill: 999px;
}

/* ══ BODY / GLOBAL ══ */
body {
  background: var(--ch-cream) !important;
  color: var(--ch-charcoal) !important;
}

/* ══ NAV — light cream nav with navy ink ══ */
nav {
  background: var(--ch-white) !important;
  border-bottom: 1px solid var(--ch-border);
  box-shadow: var(--ch-shadow-sm) !important;
}
nav .nav-logo .cap,
nav .nav-logo .headz { color: var(--ch-navy) !important; }
nav .nav-logo .headz { color: var(--ch-red) !important; }

.nav-links a {
  color: var(--ch-navy) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-weight: 700;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--ch-red) !important;
  border-color: transparent !important;
  background: transparent !important;
}

.nav-cta {
  background: var(--ch-red) !important;
  color: var(--ch-white) !important;
  border: none !important;
  border-radius: var(--ch-radius-sm);
  font-weight: 700;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background .15s ease, transform .12s ease !important;
}
.nav-cta:hover {
  background: var(--ch-red-dark) !important;
  transform: translateY(-1px);
}
.nav-cta:active { transform: translateY(0); }

.hamburger span { background: var(--ch-navy) !important; }

.mobile-menu {
  background: var(--ch-white) !important;
  border-bottom: 1px solid var(--ch-border);
  box-shadow: var(--ch-shadow-md);
}
.mobile-menu a {
  color: var(--ch-navy) !important;
  border-bottom-color: var(--ch-navy-10) !important;
}
.mobile-menu a:hover { color: var(--ch-red) !important; }

/* ══ SUB NAV — announcement bar, now cream w/ navy text ══ */
.sub-nav {
  background: var(--ch-navy) !important;
  color: var(--ch-cream);
}
.sub-nav-item {
  color: var(--ch-cream) !important;
  border-right-color: rgba(245,239,226,0.18) !important;
}

/* ══ HERO ══ — cream instead of dark navy */
.hero,
.page-hero {
  background: var(--ch-cream) !important;
  color: var(--ch-navy) !important;
  border-bottom: 1px solid var(--ch-border);
}
.hero-bg-pattern,
.hero-bg,
.page-hero-bg {
  background-image:
    repeating-linear-gradient(45deg, rgba(27,42,71,0.025) 0px, rgba(27,42,71,0.025) 1px, transparent 1px, transparent 60px),
    repeating-linear-gradient(-45deg, rgba(27,42,71,0.025) 0px, rgba(27,42,71,0.025) 1px, transparent 1px, transparent 60px) !important;
}
.hero-glow {
  background: radial-gradient(circle, rgba(178,36,43,0.08) 0%, transparent 70%) !important;
}
.hero-h1, .page-hero-h1 {
  color: var(--ch-navy) !important;
}
.hero-h1 em, .page-hero-h1 em { color: var(--ch-red) !important; }
.hero-sub, .page-hero-sub { color: var(--ch-navy-75) !important; }

.stat-num { color: var(--ch-red) !important; }
.stat-label { color: var(--ch-navy-60) !important; }

/* Hero visual "stack" card — now a clean white card */
.hero-hat-stack {
  background: var(--ch-white) !important;
  border: 1px solid var(--ch-border) !important;
  box-shadow: var(--ch-shadow-md) !important;
  border-radius: var(--ch-radius-md);
}
.hero-hat-stack::before {
  background: var(--ch-red) !important;
}
.hero-hat-title { color: var(--ch-navy-60) !important; }
.hero-hat-option {
  background: var(--ch-cream) !important;
  border: 1.5px solid var(--ch-border) !important;
}
.hero-hat-option.selected {
  border-color: var(--ch-red) !important;
  background: rgba(178,36,43,0.05) !important;
}
.hero-hat-option .hat-opt-name { color: var(--ch-navy) !important; }
.hero-hat-option .hat-opt-tag { color: var(--ch-navy-60) !important; }
.hero-hat-image {
  border: 1px solid var(--ch-border) !important;
  border-radius: var(--ch-radius-sm);
}

/* ══ BUTTONS ══ */
.btn-primary, .hero-cta, .page-hero-next-btn {
  background: var(--ch-red) !important;
  color: var(--ch-white) !important;
  font-weight: 700;
  border-radius: var(--ch-radius-sm);
  box-shadow: var(--ch-shadow-sm);
}
.btn-primary:hover, .hero-cta:hover, .page-hero-next-btn:hover {
  background: var(--ch-red-dark) !important;
}

.btn-outline {
  border: 1.5px solid var(--ch-navy) !important;
  color: var(--ch-navy) !important;
  background: transparent !important;
  border-radius: var(--ch-radius-sm);
  font-weight: 700;
}
.btn-outline:hover {
  background: var(--ch-navy) !important;
  color: var(--ch-white) !important;
}

.btn-white {
  background: var(--ch-white) !important;
  color: var(--ch-red) !important;
  border-radius: var(--ch-radius-sm);
}
.btn-outline-white {
  border: 1.5px solid rgba(255,255,255,0.7) !important;
  color: var(--ch-white) !important;
  border-radius: var(--ch-radius-sm);
}

/* ══ MARQUEE — stays red, works great as a pennant strip on cream ══ */
.marquee-strip { background: var(--ch-red) !important; }
.marquee-inner span { color: var(--ch-white) !important; }
.marquee-inner span.dot { color: var(--ch-cream) !important; }

/* ══ SECTION BASE ══ */
.section-eyebrow {
  color: var(--ch-red) !important;
  font-style: italic;
}
.section-title {
  color: var(--ch-navy) !important;
}
.section-title.light { color: var(--ch-white) !important; }
.section-sub {
  color: var(--ch-navy-75) !important;
}
.section-sub.light { color: rgba(255,255,255,0.82) !important; }

/* ══ HOW IT WORKS — white cards on cream ══ */
.how-section { background: var(--ch-cream) !important; }
.step-card {
  background: var(--ch-white) !important;
  border: 1px solid var(--ch-border);
  border-top: 3px solid var(--ch-red) !important;
  border-radius: var(--ch-radius-sm);
  box-shadow: var(--ch-shadow-sm);
}
.step-card:hover {
  box-shadow: var(--ch-shadow-lg) !important;
  border-color: var(--ch-navy-20);
  border-top-color: var(--ch-red) !important;
}
.step-num { color: rgba(178,36,43,0.12) !important; }
.step-title { color: var(--ch-navy) !important; }
.step-desc { color: var(--ch-navy-75) !important; }

/* ══ PATCH SHAPES SECTION — now cream/white, previously dark navy ══ */
.shapes-section {
  background: var(--ch-cream-deep) !important;
}
.shapes-section .section-title.light { color: var(--ch-navy) !important; }
.shapes-section .section-sub.light { color: var(--ch-navy-75) !important; }
.shape-card {
  background: var(--ch-white) !important;
  border: 1px solid var(--ch-border) !important;
  border-radius: var(--ch-radius-sm);
  box-shadow: var(--ch-shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s !important;
}
.shape-card:hover {
  border-color: var(--ch-red) !important;
  background: var(--ch-white) !important;
  box-shadow: var(--ch-shadow-lg) !important;
  transform: translateY(-3px);
}
.shape-name { color: var(--ch-navy) !important; }

/* ══ HAT STYLES SECTION ══ */
.styles-section { background: var(--ch-off-white) !important; }
.hat-style-card {
  background: var(--ch-white) !important;
  border: 1px solid var(--ch-border) !important;
  border-top: 3px solid transparent !important;
  border-radius: var(--ch-radius-sm);
  box-shadow: var(--ch-shadow-sm);
}
.hat-style-card:hover {
  border-color: var(--ch-border) !important;
  border-top-color: var(--ch-red) !important;
  box-shadow: var(--ch-shadow-lg) !important;
}
.hat-style-name { color: var(--ch-navy) !important; }
.hat-style-tag { color: var(--ch-navy-60) !important; }

/* ══ WHY PATCH HATS — cream bg ══ */
.why-section { background: var(--ch-cream) !important; }
.why-icon-wrap {
  background: var(--ch-red) !important;
  color: var(--ch-white) !important;
  border-radius: var(--ch-radius-sm);
}
.why-text-title { color: var(--ch-navy) !important; }
.why-text-desc { color: var(--ch-navy-75) !important; }
.why-visual {
  background: var(--ch-navy) !important;
  border-radius: var(--ch-radius-md);
  box-shadow: var(--ch-shadow-md);
}
.why-visual::before { border-color: rgba(255,255,255,0.07) !important; }
.why-big-num { color: var(--ch-white) !important; }
.why-big-label { color: rgba(255,255,255,0.65) !important; }
.why-combo-math { color: rgba(255,255,255,0.6) !important; }
.why-combo-math strong { color: var(--ch-red) !important; filter: brightness(1.3); }

/* ══ SOCIAL PROOF — navy block for rhythm ══ */
.proof-section { background: var(--ch-navy) !important; }
.proof-card {
  background: rgba(255,255,255,0.05) !important;
  border-left: 3px solid var(--ch-red) !important;
  border-radius: 0 var(--ch-radius-sm) var(--ch-radius-sm) 0;
}
.proof-stars { color: var(--ch-red) !important; filter: brightness(1.4); }
.proof-quote { color: rgba(255,255,255,0.88) !important; }
.proof-author { color: var(--ch-cream) !important; }

/* ══ CTA BAND — stays red (hero CTA rhythm) ══ */
.cta-band { background: var(--ch-red) !important; }
.cta-band::before,
.cta-band::after { opacity: 0.08 !important; }
.cta-eyebrow { color: rgba(255,255,255,0.85) !important; }
.cta-title, .cta-sub { color: var(--ch-white) !important; }

/* ══ FAQ ══ */
.faq-section { background: var(--ch-cream) !important; }
.faq-item { border-bottom: 1.5px solid var(--ch-border) !important; }
.faq-q { color: var(--ch-navy) !important; }
.faq-a { color: var(--ch-navy-75) !important; }

/* ══ FOOTER — stays navy for strong base ══ */
footer {
  background: var(--ch-navy) !important;
  color: rgba(255,255,255,0.72) !important;
}
.footer-brand p { color: rgba(255,255,255,0.7) !important; }
.footer-col-title { color: var(--ch-red) !important; filter: brightness(1.3); }
.footer-col a { color: rgba(255,255,255,0.72) !important; }
.footer-col a:hover { color: var(--ch-white) !important; }
.footer-divider { border-top-color: rgba(255,255,255,0.12) !important; }
.footer-copy { color: rgba(255,255,255,0.55) !important; }
.footer-tagline { color: var(--ch-cream) !important; font-style: italic; }

/* ══ GENERIC CONTENT PAGES (about, contact, help) ══ */
main { background: var(--ch-cream); }
.content-wrap {
  background: var(--ch-white) !important;
  border: 1px solid var(--ch-border);
  border-top: 4px solid var(--ch-red) !important;
  border-radius: var(--ch-radius-sm);
  box-shadow: var(--ch-shadow-md);
  padding: 2.5rem !important;
}
.content-wrap h1 { color: var(--ch-navy) !important; }
.content-wrap p { color: var(--ch-navy-75) !important; }

/* ══ GET-STARTED page — dark body becomes cream ══ */
body.get-started-body {
  background: var(--ch-cream) !important;
  color: var(--ch-navy) !important;
}

/* ══ Forms (contact, create-artwork, customizer) ══ */
input, select, textarea {
  background: var(--ch-white);
  border: 1px solid var(--ch-border);
  color: var(--ch-charcoal);
  border-radius: var(--ch-radius-sm);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--ch-red);
  outline-offset: 1px;
  border-color: var(--ch-red);
}

/* ══ Customizer / Create Artwork — convert dark panels to light ══ */
.customizer-app, .ca-app, .studio-app {
  background: var(--ch-cream) !important;
  color: var(--ch-navy) !important;
}
.panel, .side-panel, .toolbar-panel,
.cz-panel, .ca-panel {
  background: var(--ch-white) !important;
  border: 1px solid var(--ch-border) !important;
  color: var(--ch-navy) !important;
  border-radius: var(--ch-radius-sm);
  box-shadow: var(--ch-shadow-sm);
}

/* Links in content */
.content-wrap a { color: var(--ch-red); }
.content-wrap a:hover { color: var(--ch-red-dark); text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════
   CUSTOMIZER PAGE — convert the dark-themed builder to light
   ══════════════════════════════════════════════════════════════ */

/* Builder page body */
body { }  /* already cream from above */

/* Progress header — sits atop the builder */
.progress-header {
  background: var(--ch-white) !important;
  border-bottom: 1px solid var(--ch-border) !important;
  box-shadow: var(--ch-shadow-sm);
}
.prog-dot {
  background: var(--ch-cream) !important;
  border: 2px solid var(--ch-navy-20) !important;
  color: var(--ch-navy);
}
.prog-step.active .prog-dot {
  background: var(--ch-red) !important;
  border-color: var(--ch-red) !important;
  color: var(--ch-white) !important;
}
.prog-step.done .prog-dot {
  background: var(--ch-navy) !important;
  border-color: var(--ch-navy) !important;
  color: var(--ch-white) !important;
}
.prog-label { color: var(--ch-navy) !important; }
.prog-line { background: var(--ch-navy-20) !important; }

/* Controls panel — the left rail in the customizer */
.controls-panel {
  background: var(--ch-white) !important;
  border-right: 1px solid var(--ch-border) !important;
}

.panel-eyebrow { color: var(--ch-red) !important; }
.panel-title { color: var(--ch-navy) !important; }
.panel-sub { color: var(--ch-navy-75) !important; }

/* Hat option cards in customizer left rail */
.hat-opt {
  background: var(--ch-cream) !important;
  border: 1.5px solid var(--ch-border) !important;
  border-radius: var(--ch-radius-sm);
}
.hat-opt:hover {
  border-color: var(--ch-navy-20) !important;
  background: var(--ch-white) !important;
  box-shadow: var(--ch-shadow-sm);
}
.hat-opt.selected {
  border-color: var(--ch-red) !important;
  background: rgba(178,36,43,0.05) !important;
}
.hat-opt-name { color: var(--ch-navy) !important; }
.hat-opt-tag { color: var(--ch-navy-60) !important; }

.hat-color-dots {
  border-top: 1px solid var(--ch-border) !important;
}
.hat-color-dot:hover { border-color: var(--ch-navy-60) !important; }
.hat-color-dot.selected { border-color: var(--ch-red) !important; }

/* Shape option buttons (5-wide grid) */
.shape-opt {
  background: var(--ch-cream) !important;
  border: 1.5px solid var(--ch-border) !important;
  border-radius: var(--ch-radius-sm);
}
.shape-opt:hover {
  border-color: var(--ch-navy-20) !important;
  background: var(--ch-white) !important;
}
.shape-opt.selected {
  border-color: var(--ch-red) !important;
  background: rgba(178,36,43,0.05) !important;
}
.shape-opt-label { color: var(--ch-navy-60) !important; }
.shape-opt svg { color: var(--ch-navy) !important; }
.shape-opt svg path, .shape-opt svg rect, .shape-opt svg polygon, .shape-opt svg circle {
  stroke: currentColor;
}

/* Upload zone */
.upload-zone {
  border: 2px dashed var(--ch-navy-20) !important;
  background: var(--ch-cream) !important;
  border-radius: var(--ch-radius-sm);
}
.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--ch-red) !important;
  background: rgba(178,36,43,0.04) !important;
}
.upload-title { color: var(--ch-navy) !important; }
.upload-sub { color: var(--ch-navy-60) !important; }
.upload-preview { border-color: var(--ch-border) !important; }

/* Panel nav buttons (back/next) */
.btn-next {
  background: var(--ch-red) !important;
  color: var(--ch-white) !important;
  border-radius: var(--ch-radius-sm);
  font-weight: 700;
}
.btn-next:hover { background: var(--ch-red-dark) !important; }
.btn-next:disabled {
  background: rgba(178,36,43,0.3) !important;
  color: rgba(255,255,255,0.6) !important;
}

.btn-back {
  background: transparent !important;
  border: 1.5px solid var(--ch-navy-20) !important;
  color: var(--ch-navy) !important;
  border-radius: var(--ch-radius-sm);
}
.btn-back:hover {
  border-color: var(--ch-navy) !important;
  color: var(--ch-navy) !important;
  background: var(--ch-cream) !important;
}

.btn-remove-art {
  background: transparent !important;
  border: 1.5px solid var(--ch-navy-20) !important;
  color: var(--ch-navy-75) !important;
  border-radius: var(--ch-radius-sm);
}
.btn-remove-art:hover {
  border-color: var(--ch-red) !important;
  color: var(--ch-red) !important;
  background: rgba(178,36,43,0.04) !important;
}

/* Warning + status banners */
.artwork-warning {
  background: rgba(178,36,43,0.08) !important;
  border: 1px solid rgba(178,36,43,0.3) !important;
  color: var(--ch-red) !important;
}
.checkout-status {
  background: var(--ch-cream) !important;
  border: 1px solid var(--ch-border) !important;
  color: var(--ch-navy) !important;
}
.checkout-status::before {
  border-color: var(--ch-navy-20) !important;
  border-top-color: var(--ch-red) !important;
}
.checkout-status.error {
  background: rgba(178,36,43,0.08) !important;
  border-color: rgba(178,36,43,0.35) !important;
  color: var(--ch-red) !important;
}

/* Forms inside customizer/checkout */
.form-label { color: var(--ch-navy-60) !important; }
.form-input {
  background: var(--ch-white) !important;
  border: 1px solid var(--ch-border) !important;
  color: var(--ch-navy) !important;
  border-radius: var(--ch-radius-sm);
}
.form-input:focus { border-color: var(--ch-red) !important; }
.form-input::placeholder { color: var(--ch-navy-60) !important; opacity: 0.55; }

.checkout-review-note { color: var(--ch-navy-75) !important; }
.form-summary {
  background: var(--ch-cream) !important;
  border: 1px solid var(--ch-border) !important;
  border-radius: var(--ch-radius-sm);
}
.summary-title { color: var(--ch-red) !important; }
.summary-row {
  color: var(--ch-navy-75) !important;
  border-bottom-color: var(--ch-border) !important;
}
.summary-val { color: var(--ch-navy) !important; }

.price-preview {
  background: var(--ch-cream) !important;
  border: 1px solid var(--ch-border) !important;
  color: var(--ch-navy-75) !important;
  border-radius: var(--ch-radius-sm);
}
.price-preview strong { color: var(--ch-navy) !important; }

/* Art scale slider card */
.art-scale-control {
  background: var(--ch-cream) !important;
  border: 1px solid var(--ch-border) !important;
  border-radius: var(--ch-radius-sm);
}
.art-scale-row { color: var(--ch-navy-60) !important; }
.art-scale-row span { color: var(--ch-red) !important; }
.art-scale-slider { accent-color: var(--ch-red); }

/* Date picker link */
.date-picker-link {
  background: var(--ch-navy) !important;
  color: var(--ch-white) !important;
  border: 1px solid var(--ch-navy) !important;
}
.date-picker-link:hover {
  background: var(--ch-navy-soft) !important;
}

/* Preview panel (right side) — keep white but fix text colors */
.preview-panel { background: var(--ch-white) !important; }
.preview-label { color: var(--ch-navy-60) !important; }
.preview-back-hat {
  border: 1px solid var(--ch-border) !important;
  background: var(--ch-cream) !important;
  border-radius: var(--ch-radius-sm);
}
.preview-selection-key { color: var(--ch-navy-60) !important; }
.preview-selection-val { color: var(--ch-navy) !important; }

.preview-info-val { color: var(--ch-red) !important; }
.preview-info-key { color: var(--ch-navy-60) !important; }
.preview-placeholder { color: var(--ch-navy-20) !important; }

/* Success state */
.success-title { color: var(--ch-red) !important; }
.success-sub { color: var(--ch-navy-75) !important; }

/* ══════════════════════════════════════════════════════════════
   CREATE-ARTWORK STUDIO — light theme for the design tool
   ══════════════════════════════════════════════════════════════ */

/* Page head — top info bar */
.page-head {
  background: var(--ch-white) !important;
  border-bottom: 1px solid var(--ch-border) !important;
  box-shadow: var(--ch-shadow-sm);
}
.page-head * { color: var(--ch-navy) !important; }
.page-head .head-btn {
  background: var(--ch-cream) !important;
  border: 1px solid var(--ch-navy-20) !important;
  color: var(--ch-navy) !important;
  border-radius: var(--ch-radius-sm);
}
.page-head .head-btn:hover {
  border-color: var(--ch-red) !important;
  color: var(--ch-red) !important;
  background: rgba(178,36,43,0.04) !important;
}
.page-head .head-btn.primary {
  background: var(--ch-red) !important;
  border-color: var(--ch-red) !important;
  color: var(--ch-white) !important;
}
.page-head .head-btn.primary:hover {
  background: var(--ch-red-dark) !important;
  border-color: var(--ch-red-dark) !important;
  color: var(--ch-white) !important;
}
.page-head .head-btn.gold {
  background: var(--ch-navy) !important;
  border-color: var(--ch-navy) !important;
  color: var(--ch-white) !important;
}
.page-head .head-btn.gold:hover {
  background: var(--ch-navy-soft) !important;
  border-color: var(--ch-navy-soft) !important;
  color: var(--ch-white) !important;
}

/* Studio layout — 3 columns */
.studio {
  background: var(--ch-border) !important;  /* hairline bg */
}
.studio > * {
  background: var(--ch-white) !important;
}

/* Left rail — tools */
.rail {
  border-right: 1px solid var(--ch-border) !important;
}
.rail-label {
  color: var(--ch-red) !important;
  border-bottom: 1px solid var(--ch-border) !important;
}

/* Shape picker buttons */
.shape-btn {
  background: var(--ch-cream) !important;
  border: 1.5px solid var(--ch-border) !important;
  border-radius: var(--ch-radius-sm);
}
.shape-btn:hover {
  border-color: var(--ch-navy-20) !important;
  background: var(--ch-white) !important;
}
.shape-btn.active {
  border-color: var(--ch-red) !important;
  background: rgba(178,36,43,0.06) !important;
}
.shape-btn svg { color: var(--ch-navy) !important; }
.shape-btn svg * { stroke: currentColor; }
.shape-btn .lbl { color: var(--ch-navy-60) !important; }

/* Tool buttons (add text/image/clip-art) */
.tool-btn {
  background: var(--ch-cream) !important;
  border: 1px solid var(--ch-border) !important;
  color: var(--ch-navy) !important;
  border-radius: var(--ch-radius-sm);
}
.tool-btn:hover {
  border-color: var(--ch-red) !important;
  background: rgba(178,36,43,0.04) !important;
  color: var(--ch-red) !important;
}

/* Upload dropzone in create-artwork */
.upload-dropzone {
  border: 2px dashed var(--ch-navy-20) !important;
  background: var(--ch-cream) !important;
  border-radius: var(--ch-radius-sm);
}
.upload-dropzone:hover, .upload-dropzone.drag {
  border-color: var(--ch-red) !important;
  background: rgba(178,36,43,0.04) !important;
}
.upload-dropzone .ttl { color: var(--ch-navy) !important; }
.upload-dropzone .hint { color: var(--ch-navy-60) !important; }

/* Clip-art / chip grid */
.chip {
  background: var(--ch-cream) !important;
  border: 1px solid var(--ch-border) !important;
  color: var(--ch-navy) !important;
  border-radius: var(--ch-radius-sm);
}
.chip:hover {
  border-color: var(--ch-red) !important;
  background: rgba(178,36,43,0.04) !important;
}
.chip .glyph { color: var(--ch-red) !important; }

/* Template cards */
.tpl-card {
  background: var(--ch-cream) !important;
  border: 1px solid var(--ch-border) !important;
  border-radius: var(--ch-radius-sm);
}
.tpl-card:hover {
  border-color: var(--ch-red) !important;
  background: var(--ch-white) !important;
}
.tpl-name { color: var(--ch-navy-60) !important; }

/* Swatches — active ring should be red */
.swatch.active { border-color: var(--ch-red) !important; }

/* Stage area — the big canvas work area */
.stage {
  background:
    linear-gradient(rgba(27,42,71,0.04), rgba(27,42,71,0.08)),
    radial-gradient(circle at 50% 40%, rgba(178,36,43,0.04), transparent 70%) !important;
}
.stage::after {
  background-image:
    linear-gradient(rgba(27,42,71,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,42,71,0.04) 1px, transparent 1px) !important;
}
.stage-toolbar {
  background: var(--ch-cream) !important;
  border-bottom: 1px solid var(--ch-border) !important;
}
.tool-chip {
  background: var(--ch-white) !important;
  border: 1px solid var(--ch-border) !important;
  color: var(--ch-navy) !important;
  border-radius: var(--ch-radius-sm);
}
.tool-chip:hover:not(:disabled) {
  border-color: var(--ch-red) !important;
  color: var(--ch-red) !important;
  background: rgba(178,36,43,0.04) !important;
}
.zoom-badge { color: var(--ch-navy-60) !important; }

.canvas-frame {
  box-shadow: var(--ch-shadow-lg), 0 0 0 1px var(--ch-border) !important;
}

/* Rotation handle (was gold) */
.handle.rot {
  background: var(--ch-red) !important;
  border-color: var(--ch-red) !important;
}
.handle.rot::before { background: var(--ch-red) !important; }

/* Inspector right rail */
.inspector {
  border-left: 1px solid var(--ch-border) !important;
}
.inspector-empty {
  color: var(--ch-navy-60) !important;
  border: 1px dashed var(--ch-border) !important;
}
.insp-title {
  color: var(--ch-navy) !important;
  border-bottom: 1px solid var(--ch-border) !important;
}
.insp-row label { color: var(--ch-navy-60) !important; }
.insp-btn {
  background: var(--ch-cream) !important;
  border: 1px solid var(--ch-border) !important;
  color: var(--ch-navy) !important;
  border-radius: var(--ch-radius-sm);
}
.insp-btn:hover {
  border-color: var(--ch-red) !important;
  color: var(--ch-red) !important;
  background: rgba(178,36,43,0.04) !important;
}
.insp-btn.danger:hover {
  border-color: var(--ch-red) !important;
  color: var(--ch-red) !important;
  background: rgba(178,36,43,0.08) !important;
}
.insp-btn.active {
  background: var(--ch-red) !important;
  border-color: var(--ch-red) !important;
  color: var(--ch-white) !important;
}

/* Layer list */
.layer {
  background: var(--ch-cream) !important;
  border: 1px solid var(--ch-border) !important;
  color: var(--ch-navy) !important;
  border-radius: var(--ch-radius-sm);
}
.layer:hover {
  border-color: var(--ch-navy-20) !important;
  background: var(--ch-white) !important;
}
.layer.active {
  border-color: var(--ch-red) !important;
  background: rgba(178,36,43,0.08) !important;
  color: var(--ch-navy) !important;
}
.layer .kind { color: var(--ch-navy-75) !important; }

/* Empty-hint text on canvas */
.empty-hint { color: rgba(27,42,71,0.35) !important; }
.empty-hint strong { color: rgba(27,42,71,0.55) !important; }

/* Generic panel eyebrow in customizer step sections */
[style*="color:var(--grizzly-gold)"],
[style*="color: var(--grizzly-gold)"] {
  color: var(--ch-red) !important;
}