/* =============================================================
   Prime & Coat — Shared Stylesheet
   Loaded on every page. Page-specific styles live in
   js/colors.js, js/tools.js, js/samples.js (via <style> tags
   only when needed).
   ============================================================= */

/* Typography */
body { font-family: 'Inter', sans-serif; }
h1, h2, h3, h4, .brand-font { font-family: 'Montserrat', sans-serif; }

/* Brand Colors */
.bg-brand-charcoal  { background-color: #2D3436; }
.text-brand-charcoal { color: #2D3436; }
.text-brand-orange  { color: #E67E22; }
.bg-brand-orange    { background-color: #E67E22; }
.border-brand-orange { border-color: #E67E22; }

/* Layout */
html { scroll-behavior: smooth; }
.rounded-custom { border-radius: 2rem; }

/* Scrollbar — color gallery (used on colors.html + samples.html) */
#colorGallery::-webkit-scrollbar       { width: 6px; }
#colorGallery::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
#colorGallery::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
#colorGallery::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Hide scrollbar for tab rows */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Custom checkbox accent */
input[type="checkbox"] { accent-color: #E67E22; cursor: pointer; }

/* Focus ring for form inputs */
.focus-ring-orange:focus {
    outline: none;
    box-shadow: 0 0 0 2px #E67E22;
    border-color: #E67E22;
}

/* -------------------------------------------------------
   3D Flip Card — used on colors.html
   ------------------------------------------------------- */
.flip-card { perspective: 1000px; cursor: pointer; }
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
}
.flip-card.flipped .flip-card-inner,
.flip-card:hover .flip-card-inner.hover-flip { transform: rotateY(180deg); }
.flip-card-front,
.flip-card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
}
.flip-card-back {
    background-color: #2D3436;
    color: white;
    transform: rotateY(180deg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* -------------------------------------------------------
   Tools page — card & wizard animations
   ------------------------------------------------------- */
.tool-card {
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
    border-color: #fbd38d;
}
.tool-card.active {
    border-color: #E67E22;
    background-color: #FFF7ED;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
}
.tool-card.active .icon-container { background-color: #E67E22; color: white; transform: scale(1.1); }
.icon-container { transition: all 0.3s ease; }

.step-container { display: none; animation: fadeInStep 0.5s ease-out forwards; }
.step-container.active { display: block; }
@keyframes fadeInStep {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}

.option-card {
    background-color: white;
    border: 2px solid #E5E7EB;
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.option-card:hover  { border-color: #E67E22; transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0,0,0,.05); }
.option-card.selected { border-color: #E67E22; background-color: #FFF7ED; }