:root {
  color-scheme: dark;
  --si-bg: #0B0B0D;
  --si-panel: #1B1B1E;
  --si-text: #F4F4F5;
  --si-muted: #A1A1AA;
  --si-accent: #F50087;
  --si-hover: #FF319E;
  /* White text on the exact brand pink misses AA for normal-size labels. */
  --si-button: #D10072;
  --si-gold: #D8C49A;
  --si-gold-hover: #E8D6B2;
  --si-gold-ink: #0B0B0D;
  --si-marketing-pink: #F50087;
  --si-line: #303035;
  --color-si-accent: var(--si-accent);
  --color-si-hover: var(--si-hover);
  --color-si-button: var(--si-button);
  --color-si-gold: var(--si-gold);
  --color-si-gold-hover: var(--si-gold-hover);
  --color-pink-400: var(--si-hover);
  --color-pink-500: var(--si-accent);
  --color-pink-600: var(--si-button);
  --color-neutral-950: var(--si-bg);
  --color-neutral-900: var(--si-panel);
  --color-neutral-800: var(--si-line);
  --color-neutral-700: var(--si-line);
  --color-neutral-400: var(--si-muted);
  --color-neutral-100: var(--si-text);
}

/* Studio controls use the premium gold identity; pink remains available as an artwork color. */
#customizer-root {
  --si-accent: var(--si-gold);
  --si-hover: var(--si-gold-hover);
  --si-button: var(--si-gold);
  --color-si-accent: var(--si-gold);
  --color-si-hover: var(--si-gold-hover);
  --color-si-button: var(--si-gold);
  --color-si-gold: var(--si-gold);
  --color-pink-400: var(--si-gold-hover);
  --color-pink-500: var(--si-gold);
  --color-pink-600: var(--si-gold);
}
#wholesale-studio-root { --si-accent: var(--si-gold); --si-hover: var(--si-gold-hover); --si-button: var(--si-gold); --color-si-accent: var(--si-gold); --color-si-hover: var(--si-gold-hover); --color-si-button: var(--si-gold); --color-pink-400: var(--si-gold-hover); --color-pink-500: var(--si-gold); --color-pink-600: var(--si-gold); }
#customizer-root :where(button, a, input, select, textarea, summary):focus-visible {
  outline-color: var(--si-gold);
}
#customizer-root .bg-si-button { color: var(--si-gold-ink); }
#customizer-root .file\:bg-si-button::file-selector-button { color: var(--si-gold-ink); }
#wholesale-studio-root .bg-si-button { color: var(--si-gold-ink); }
#wholesale-studio-root .file\:bg-si-button::file-selector-button { color: var(--si-gold-ink); }
.snapink-studio-content { --si-accent: var(--si-gold); --si-hover: var(--si-gold-hover); --si-button: var(--si-gold); }
.snapink-studio-content :where(button, a, input, select, textarea):focus-visible { outline-color: var(--si-gold); }
.studio-cta { background: var(--si-gold) !important; border-color: var(--si-gold) !important; color: var(--si-gold-ink) !important; }
.studio-cta:hover { background: var(--si-gold-hover) !important; border-color: var(--si-gold-hover) !important; color: var(--si-gold-ink) !important; }
.studio-link, a[href="/customize.html"], a[href^="/customize.html#"] { --destination-accent: var(--si-gold); }
a[href="/customize.html"], a[href^="/customize.html#"] { color: var(--si-gold); }
a[href="/customize.html"].primary, a[href^="/customize.html#"].primary { color: var(--si-gold-ink); }
a[href="/customize.html"].button, a[href="/customize.html"].primary,
a[href^="/customize.html#"].snap-btn, a[href="/customize.html"].bg-pink-600 {
  background: var(--si-gold) !important;
  border-color: var(--si-gold) !important;
  color: var(--si-gold-ink) !important;
}
a[href="/customize.html"].button:hover, a[href="/customize.html"].primary:hover,
a[href^="/customize.html#"].snap-btn:hover, a[href="/customize.html"].bg-pink-600:hover {
  background: var(--si-gold-hover) !important;
  border-color: var(--si-gold-hover) !important;
  color: var(--si-gold-ink) !important;
}
.snap-btn { background: var(--si-gold) !important; color: var(--si-gold-ink) !important; }
.snap-btn:hover { background: var(--si-gold-hover) !important; color: var(--si-gold-ink) !important; }
.snap-links a[href="/customize.html"], .snap-links a[href^="/customize.html#"] { color: var(--si-gold); }
.snap-links a[href="/pilot.html"], .snapink-mobile-panel a[href="/pilot.html"],
.snapink-mobile-panel a[href="/drop001.html"], .snapink-mobile-panel a[href="/wholesale"] { color: var(--si-accent); }
.snapink-mobile-panel .snapink-mobile-panel__cta,
.snapink-mobile-panel .snapink-mobile-panel__cta:hover,
.snapink-mobile-panel .snapink-mobile-panel__cta[aria-current="page"] {
  border-color: var(--si-gold); background: var(--si-gold); color: var(--si-gold-ink);
}
.snapink-mobile-panel .snapink-mobile-panel__cta:hover { background: var(--si-gold-hover); }
.snapink-mobile-header__toggle { border-color: color-mix(in srgb, var(--si-accent) 36%, transparent); }
.snapink-mobile-panel a[href="/customize.html"], .snapink-mobile-panel a[href^="/customize.html#"] { color: var(--si-gold); }
.snapink-mobile-panel a[href="/pilot.html"], .snapink-mobile-panel a[href="/wholesale"],
.snapink-mobile-panel a[href="/drop001.html"] { color: var(--si-marketing-pink); }
.snapink-mobile-panel a[href="/pilot.html"]:hover, .snapink-mobile-panel a[href="/wholesale"]:hover,
.snapink-mobile-panel a[href="/drop001.html"]:hover { color: var(--si-hover); }
.snap-links a[href="/pilot.html"] { color: #fff; }
.snap-links a[href="/pilot.html"]:hover,
.snap-links a[href="/pilot.html"]:focus-visible,
.snap-links a[href="/pilot.html"][aria-current="page"] { color: #fff; }
.links a[href="/pilot.html"], .links a[href="/wholesale-info.html"],
.links a[href="/drop001.html"], .links a[href="/wholesale"] { color: var(--si-marketing-pink); }
.links a[href="/pilot.html"],
.links a[href="/pilot.html"]:hover,
.links a[href="/pilot.html"]:focus-visible,
.links a[href="/pilot.html"][aria-current="page"] { color: #fff; }
.links a[href="/customize.html"] { color: var(--si-gold); }
.links a[href="/customize.html"]:hover { color: var(--si-gold-hover); }
.links a[href="/pilot.html"]:hover, .links a[href="/wholesale-info.html"]:hover,
.links a[href="/drop001.html"]:hover, .links a[href="/wholesale"]:hover { color: var(--si-hover); }
.hero .eyebrow, .hero .patent-pending, .hero .patent-pending::before { color: var(--si-gold); }
.hero .patent-pending { border-left-color: var(--si-gold); }
.hero .subline { color: var(--si-accent) !important; }
.hero a.button[href="/customize.html"] { background: var(--si-gold); border-color: var(--si-gold); color: var(--si-gold-ink); }
.hero a.button[href="/customize.html"]:hover { background: var(--si-gold-hover); border-color: var(--si-gold-hover); }
.shop-copy > .eyebrow, .protection-copy > .eyebrow, .patent-pending { color: var(--si-gold); }
.patent-pending { border-left-color: var(--si-gold); }
.fit-guide-page .install-step-number, .fit-guide-page .install-lightbox-head h2 { color: var(--si-gold); }
.wholesale-studio { --si-accent: var(--si-gold); --si-hover: var(--si-gold-hover); --si-button: var(--si-gold); }
.wholesale-studio :where(button, a, input, select):focus-visible { outline-color: var(--si-gold); }

body { background-color: var(--si-bg); color: var(--si-text); }
.snapink-brand-tagline { color: var(--si-marketing-pink); }
body.snapink-studio-content { --si-accent: var(--si-gold); --si-hover: var(--si-gold-hover); --si-button: var(--si-gold); --snap-accent: var(--si-gold); --snap-hover: var(--si-gold-hover); }
body.snapink-studio-content .snap-links a[href="/pilot.html"] { border-color: var(--si-marketing-pink); background: #D10072; color: #fff; }
body.snapink-studio-content .snap-links a[href="/pilot.html"]:hover { background: var(--si-marketing-pink); color: #fff; }
body.snapink-studio-content .snapink-brand-tagline { color: var(--si-marketing-pink); }
.install-step-number, .install-lightbox-head h2 { color: var(--si-gold) !important; }
header nav a[href="/customize.html"] { color: var(--si-gold) !important; }
header nav a[aria-current="page"]::after { background: var(--si-gold); }
.max-w-7xl h1 span.text-pink-500 { color: var(--si-gold) !important; }
.snapink-page--partner-portal button:not(.snapink-mobile-panel__cta) { background: var(--si-gold); color: var(--si-gold-ink); }
.snapink-page--partner-portal button:not(.snapink-mobile-panel__cta):hover { background: var(--si-gold-hover); }
::selection { background: var(--si-accent); color: #fff; }
a:hover { color: var(--si-hover); }
:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--si-accent);
  outline-offset: 2px;
}
button[type="submit"], input[type="submit"], .button:not(.secondary), .primary, .submit {
  background-color: var(--si-button);
  border-color: var(--si-button);
  color: #fff;
}
button[type="submit"]:hover, input[type="submit"]:hover,
.button:not(.secondary):hover, .primary:hover, .submit:hover {
  background-color: var(--si-hover);
  border-color: var(--si-hover);
  color: #fff;
}
.bg-pink-600 { background-color: var(--si-button); color: #fff; }
.bg-pink-600:hover { background-color: var(--si-hover); color: #fff; }
.bg-si-button { color: #fff; }
.bg-si-button:hover { background-color: var(--si-hover); color: #fff; }
.bg-si-button { background-color: var(--si-button); }
.text-si-accent { color: var(--si-accent); }
.border-si-accent { border-color: var(--si-accent); }
.border-si-accent\/20 { border-color: color-mix(in srgb, var(--si-accent) 20%, transparent); }
.border-si-accent\/50 { border-color: color-mix(in srgb, var(--si-accent) 50%, transparent); }
.hover\:border-si-accent\/60:hover { border-color: color-mix(in srgb, var(--si-accent) 60%, transparent); }
.bg-si-button\/15 { background-color: color-mix(in srgb, var(--si-button) 15%, transparent); }
.hover\:bg-si-button\/10:hover { background-color: color-mix(in srgb, var(--si-button) 10%, transparent); }
.focus\:border-si-accent:focus { border-color: var(--si-accent); }
.ring-si-accent { --tw-ring-color: var(--si-accent); }
.accent-si-accent { accent-color: var(--si-accent); }
.shadow-si-accent\/20 { --tw-shadow-color: color-mix(in srgb, var(--si-accent) 20%, transparent); }
.file\:bg-si-button::file-selector-button { background-color: var(--si-button); color: #fff; }
.snapink-mobile-panel .snapink-mobile-panel__cta:hover { color: #fff; }
.card, .panel, .form, .pilot, .product-showcase, .box {
  background-color: var(--si-panel);
}
button:disabled, input:disabled, select:disabled, textarea:disabled {
  cursor: not-allowed;
  opacity: .55;
}