/*
 * Canvas Crush Studio — Shared Stylesheet
 * Loaded by every page. Page-specific overrides live inline.
 * ─────────────────────────────────────────────────────────
 */

/* ── Brand Tokens ──────────────────────────────────────── */
:root {
  --color-primary:           #003635;
  --color-primary-hover:     #124e4c;
  --color-secondary:         #904b36;
  --color-surface:           #fbfaf9;
  --color-surface-low:       #f6f3f0;
  --color-on-surface:        #1f1b1a;
  --color-on-surface-var:    #5a524e;
  --color-outline-var:       #d8cfcc;
  --color-error:             #ba1a1a;

  --font-headline: 'Epilogue', sans-serif;
  --font-body:     'Manrope', sans-serif;
  --font-label:    'Manrope', sans-serif;

  --radius-sm:  0.5rem;
  --radius-md:  0.75rem;
  --radius-lg:  1rem;
  --radius-xl:  1.25rem;
  --radius-2xl: 1.5rem;

  --shadow-card: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
  --shadow-btn:  0 4px 14px rgba(0,54,53,0.18);
  --shadow-nav:  0 1px 0 rgba(0,0,0,0.06);
}

/* ── Base ──────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Material Symbols ──────────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
  vertical-align: middle;
}

/* ── Mobile Nav ────────────────────────────────────────── */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
#mobile-menu.open {
  max-height: 400px;
}

/* ── Focus Rings (inputs, selects, textareas) ──────────── */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px rgba(0, 54, 53, 0.15) !important;
}

/* ── Form Validation ───────────────────────────────────── */
.field-error {
  border-color: var(--color-error) !important;
}

.error-msg {
  display: none;
  margin-top: 4px;
  color: var(--color-error);
  font-size: 0.7rem;
  font-family: var(--font-label);
  font-weight: 700;
}
.error-msg.visible {
  display: block;
}

/* ── Toast (shared across public pages) ────────────────── */
#toast {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ── Nav Tabs (admin + filter pills) ───────────────────── */
.tab-nav-item.active {
  background-color: var(--color-primary);
  color: #ffffff;
}

/* ── Gallery Filter Buttons ────────────────────────────── */
.filter-btn.active {
  background-color: var(--color-primary);
  color: #ffffff;
}
.filter-btn.active:hover {
  background-color: var(--color-primary-hover);
}

/* ── Product Page Thumbnails ───────────────────────────── */
.thumb.active {
  border-color: var(--color-primary);
  opacity: 1;
}

/* ── Product Page Tab Buttons ──────────────────────────── */
.tab-btn.active {
  background-color: #ffffff;
  color: var(--color-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ── Product Page Frame Buttons ────────────────────────── */
.frame-btn.selected {
  border-color: var(--color-primary);
  background-color: #ffffff;
}

/* ── Admin Modal ───────────────────────────────────────── */
#modal-overlay {
  transition: opacity 0.2s ease;
}
#toast-admin {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ── Image Upload Placeholders ─────────────────────────── */
[data-section-placeholder] {
  background-color: #f2ede4;
  border: 2px dashed var(--color-outline-var);
  border-radius: var(--radius-lg);
}

/* ── Cards ─────────────────────────────────────────────── */
.ccs-card {
  background-color: #ffffff;
  border: 1px solid rgba(216, 207, 204, 0.3);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  padding: 2rem;
}

/* ── Primary Button ─────────────────────────────────────── */
.ccs-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background-color: var(--color-primary);
  color: #ffffff;
  font-family: var(--font-headline);
  font-weight: 700;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-btn);
  transition: opacity 0.2s ease, transform 0.1s ease;
  cursor: pointer;
  border: none;
  text-decoration: none;
}
.ccs-btn-primary:hover  { opacity: 0.9; }
.ccs-btn-primary:active { transform: scale(0.98); }

/* ── Ghost / Outline Button ─────────────────────────────── */
.ccs-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background-color: transparent;
  color: var(--color-primary);
  font-family: var(--font-label);
  font-weight: 700;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-md);
  transition: background-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}
.ccs-btn-ghost:hover {
  background-color: var(--color-primary);
  color: #ffffff;
}

/* ── Category / Badge Pills ─────────────────────────────── */
.ccs-badge {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  font-family: var(--font-label);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.ccs-badge--primary   { background-color: var(--color-primary); color: #ffffff; }
.ccs-badge--secondary { background-color: #ffdad3; color: var(--color-secondary); }
.ccs-badge--neutral   { background-color: var(--color-surface-low); color: var(--color-on-surface-var); }

/* ── Sold Badge ─────────────────────────────────────────── */
.ccs-sold-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  background-color: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 999px;
  font-family: var(--font-label);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ── Section Headings ───────────────────────────────────── */
.ccs-section-label {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  background-color: #fff7ed;
  padding: 0.375rem 1rem;
  border-radius: 999px;
}

/* ── Stat Card ──────────────────────────────────────────── */
.ccs-stat {
  background-color: #fff7ed;
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  text-align: center;
}
.ccs-stat__value {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
}
.ccs-stat__label {
  font-family: var(--font-label);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-on-surface-var);
  margin-top: 0.25rem;
}

/* ── Rich Content (editable HTML fields) ────────────────── */
[data-page="richContent"] h2,
[data-page="richContent"] h3 {
  font-family: var(--font-headline);
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
[data-page="richContent"] p {
  line-height: 1.8;
  margin-bottom: 1rem;
}
[data-page="richContent"] strong {
  font-weight: 700;
  color: var(--color-on-surface);
}
[data-page="richContent"] a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ── Print / Page-break Safety ──────────────────────────── */
@media print {
  nav, footer, #toast, #toast-admin { display: none !important; }
  body { background: white; color: black; }
}

/* ── Reduced-motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}