/* Blossom Studio — brand tokens from the Budget Blossoms site */
:root {
  --purple: #7b2e9e;
  --purple-dark: #5c2178;
  --plum: #3b1a4d;
  --pink: #f2a9b4;
  --pink-soft: #fbe3e8;
  --daisy: #ffd95e;
  --cream: #fdf8f3;
  --lav: #f5eefb;
}

@font-face { font-family: 'Fredoka';        src: url('../fonts/Fredoka.ttf'); }
@font-face { font-family: 'Nunito';         src: url('../fonts/Nunito.ttf'); }
@font-face { font-family: 'Caveat';         src: url('../fonts/Caveat.ttf'); }
@font-face { font-family: 'Dancing Script'; src: url('../fonts/DancingScript.ttf'); }
@font-face { font-family: 'Baloo 2';        src: url('../fonts/Baloo2.ttf'); }
@font-face { font-family: 'Quicksand';      src: url('../fonts/Quicksand.ttf'); }
@font-face { font-family: 'Pacifico';       src: url('../fonts/Pacifico.ttf'); }
@font-face { font-family: 'Lobster';        src: url('../fonts/Lobster.ttf'); }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--plum);
  font-family: 'Nunito', system-ui, sans-serif;
}

h1, h2, h3, legend { font-family: 'Fredoka', 'Nunito', sans-serif; font-weight: 500; }

/* ---- app frame ---- */
/* minmax(0,1fr) column stops grid items sizing the page to their content width */
.frame { display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); height: 100vh; }

.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px;
  background: var(--purple);
  color: #fff;
}
.topbar h1 { margin: 0; font-size: 22px; letter-spacing: 0.5px; }
.topbar .daisy { color: var(--daisy); }
.topbar .spacer { flex: 1; }

.mode-toggle { display: flex; background: var(--purple-dark); border-radius: 999px; padding: 3px; }
.mode-toggle button {
  border: 0; background: transparent; color: #e9d5f5;
  font: 600 13px 'Nunito', sans-serif; padding: 6px 16px; border-radius: 999px; cursor: pointer;
}
.mode-toggle button.active { background: #fff; color: var(--purple); }

.main { display: grid; grid-template-columns: 360px 1fr; min-height: 0; }

/* ---- control panel ---- */
.panel {
  background: var(--lav);
  border-right: 2px solid #e7dbf3;
  overflow-y: auto;
  padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.card {
  background: #fff; border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(59, 26, 77, 0.08);
}
.card h3 { margin: 0 0 8px; font-size: 15px; color: var(--purple-dark); }

.row { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.row label { font-size: 12.5px; font-weight: 700; min-width: 74px; }
.row input[type=text], .row input[type=number], .row select {
  flex: 1; min-width: 0;
  font: 14px 'Nunito', sans-serif; color: var(--plum);
  padding: 6px 8px; border: 1.5px solid #ddc9ee; border-radius: 8px; background: #fff;
}
.row input[type=color] { width: 34px; height: 28px; padding: 0; border: 1.5px solid #ddc9ee; border-radius: 6px; background: none; }
.row input[type=range] { flex: 1; min-width: 0; accent-color: var(--purple); }
.row span { font-size: 12px; font-weight: 700; color: var(--purple-dark); min-width: 38px; text-align: right; }
.row.colors { flex-wrap: wrap; }
.row.colors label { min-width: 0; font-weight: 600; font-size: 11.5px; }

.btn {
  font: 700 14px 'Nunito', sans-serif;
  border: 0; border-radius: 10px; padding: 10px 14px; cursor: pointer;
}
.btn-primary {
  background: var(--purple); color: #fff; width: 100%;
  font-family: 'Fredoka', sans-serif; font-size: 18px; letter-spacing: 0.4px;
  padding: 13px; box-shadow: 0 3px 0 var(--purple-dark);
}
.btn-primary:active { transform: translateY(2px); box-shadow: none; }
.btn-primary:disabled { background: #b99cc9; box-shadow: none; cursor: wait; }
.btn-ghost { background: transparent; color: var(--purple); text-decoration: underline; padding: 4px; }
.btn-small { background: var(--pink-soft); color: var(--purple-dark); padding: 6px 10px; font-size: 12.5px; }

.swatches { display: flex; gap: 8px; }
.swatch {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 3px solid transparent;
}
.swatch.active { border-color: var(--plum); }

/* asset pickers */
.asset-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.asset-grid .pick {
  width: 52px; height: 52px; border-radius: 10px; border: 2px solid #e3d5f0;
  background: #fff center/contain no-repeat; cursor: pointer; padding: 0;
  font-size: 10px; color: #9a86ab;
}
.asset-grid .pick.active { border-color: var(--purple); box-shadow: 0 0 0 2px var(--pink); }

/* ---- preview ---- */
.stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 22px; overflow: auto;
  background:
    radial-gradient(circle at 18% 22%, rgba(242, 169, 180, 0.14), transparent 42%),
    radial-gradient(circle at 84% 74%, rgba(255, 217, 94, 0.12), transparent 40%),
    var(--cream);
}
.preview-wrap {
  background: #fff; border-radius: 6px;
  box-shadow: 0 10px 30px rgba(59, 26, 77, 0.18);
  line-height: 0;
}
.preview-wrap svg { border-radius: 6px; max-width: 100%; height: auto; }
.stage .caption { font-size: 13px; color: var(--purple-dark); text-align: center; line-height: 1.5; }
.stage .caption b { font-family: 'Fredoka', sans-serif; font-weight: 500; }

.hidden { display: none !important; }

/* ---- phones / narrow screens: stack preview above the controls ---- */
@media (max-width: 860px) {
  .frame { height: auto; min-height: 100dvh; }
  .topbar { flex-wrap: wrap; gap: 8px 14px; }
  .main { display: flex; flex-direction: column; }
  .stage { order: -1; padding: 14px; }
  .panel {
    border-right: 0; border-top: 2px solid #e7dbf3;
    overflow-y: visible;
  }
}