/* ===========================================================
   Poster Personalization Studio — Warm / Handmade design tokens
   =========================================================== */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500;1,6..72,600&family=Hanken+Grotesk:wght@400;500;600;700&family=Caveat:wght@500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap");

:root {
  /* Paper / surfaces */
  --paper:      #F0E7D6;   /* page background */
  --paper-2:    #F7F0E3;   /* recessed panels */
  --card:       #FFFCF5;   /* raised cards / panels */
  --card-warm:  #FBF4E8;

  /* Ink */
  --ink:        #3A2D20;
  --ink-2:      #6E5C48;
  --ink-3:      #9C8A73;
  --ink-soft:   #B6A488;

  /* Lines */
  --line:       #E5D8C0;
  --line-2:     #D8C6A8;
  --line-strong:#CBB591;

  /* Brand accents */
  --clay:       #C0603E;   /* primary */
  --clay-dark:  #A44C2D;
  --clay-press: #8F4124;
  --clay-tint:  #F0DACE;
  --clay-tint-2:#E7C7B6;

  --ochre:      #D29A3C;
  --ochre-tint: #F2E2C0;
  --sage:       #7E8B58;
  --sage-tint:  #E0E2CC;
  --dusty:      #6E8AA0;
  --plum:       #8C5C6C;

  /* Poster palette (muted, warm) */
  --p-cream:    #ECE2D0;
  --p-terra:    #C0603E;
  --p-ochre:    #D29A3C;
  --p-sage:     #7E8B58;
  --p-dusty:    #6E8AA0;
  --p-charcoal: #2E2A26;
  --p-blush:    #E6C3B4;
  --p-forest:   #3B4A3A;

  /* Frames */
  --fr-oak:     linear-gradient(125deg,#D8B783,#C39E63 45%,#E2C895 55%,#C09A5E); /* @kind color */
  --fr-walnut:  linear-gradient(125deg,#6F4C33,#52351F 45%,#7A5639 55%,#4D3119); /* @kind color */
  --fr-black:   linear-gradient(125deg,#2A2622,#161311 50%,#322D28); /* @kind color */
  --fr-white:   linear-gradient(125deg,#F6F1E6,#E8DFCC 50%,#F6F1E6); /* @kind color */

  /* Radii */
  --r-xs: 7px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadows — warm, soft */
  --sh-sm: 0 1px 2px rgba(74,52,30,.10);
  --sh-md: 0 4px 14px rgba(74,52,30,.10), 0 1px 3px rgba(74,52,30,.08);
  --sh-lg: 0 14px 38px rgba(58,40,22,.16), 0 4px 12px rgba(58,40,22,.10);
  --sh-poster: 0 22px 50px rgba(45,30,15,.28), 0 6px 16px rgba(45,30,15,.18);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.6);

  /* Type */
  --serif: "Newsreader", Georgia, "Times New Roman", serif; /* @kind font */
  --sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif; /* @kind font */
  --hand:  "Caveat", "Segoe Script", cursive; /* @kind font */
  --poster-serif: "Newsreader", Georgia, serif; /* @kind font */
  --poster-sans:  "Hanken Grotesk", system-ui, sans-serif; /* @kind font */
  --poster-mono:  "Spline Sans Mono", ui-monospace, monospace; /* @kind font */

  --ease: cubic-bezier(.32,.72,.31,1); /* @kind other */
  --ease-out: cubic-bezier(.16,1,.3,1); /* @kind other */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Faint paper grain overlay */
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }

::selection { background: var(--clay-tint-2); }

/* Scrollbars */
.scroll-y { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.scroll-y::-webkit-scrollbar { width: 9px; height: 9px; }
.scroll-y::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
.scroll-y::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--r-pill);
  font-weight: 600; font-size: 15px; line-height: 1;
  padding: 13px 22px; min-height: 46px;
  transition: transform .12s var(--ease), background .15s, box-shadow .15s, color .15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--clay); color: #FFF7EF; box-shadow: var(--sh-sm); }
.btn-primary:hover { background: var(--clay-dark); }
.btn-primary:active { background: var(--clay-press); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line-2); }
.btn-ghost:hover { background: var(--paper-2); border-color: var(--line-strong); }
.btn-soft { background: var(--clay-tint); color: var(--clay-dark); }
.btn-soft:hover { background: var(--clay-tint-2); }
.btn-icon {
  width: 46px; height: 46px; min-height: 46px; padding: 0;
  border-radius: 50%;
}

/* ---------- Option tiles & swatches ---------- */
.tile {
  position: relative; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--card);
  border-radius: var(--r-md); transition: border-color .15s, box-shadow .15s, transform .12s var(--ease), background .15s;
}
.tile:hover { border-color: var(--line-strong); }
.tile.is-active { border-color: var(--clay); box-shadow: 0 0 0 3px var(--clay-tint); }
.tile:active { transform: scale(.98); }

.swatch {
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  cursor: pointer; position: relative; border: 1.5px solid rgba(58,45,32,.16);
  transition: transform .12s var(--ease), box-shadow .15s;
  box-shadow: var(--sh-sm);
}
.swatch:hover { transform: scale(1.06); }
.swatch.is-active { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5.5px var(--clay); }

/* Section label — small uppercase */
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}
.hand-note { font-family: var(--hand); color: var(--clay-dark); }

/* Tape sticker decoration */
.tape {
  position: absolute; width: 86px; height: 26px;
  background: rgba(232, 214, 178, .72);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  backdrop-filter: blur(.5px);
}
.tape::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,0) 30%, rgba(0,0,0,.04));
}

/* Dashed dropzone */
.dropzone {
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--paper-2);
  transition: border-color .15s, background .15s;
}
.dropzone:hover { border-color: var(--clay); background: var(--clay-tint); }

/* Range slider (warm) */
input[type="range"].warm {
  -webkit-appearance: none; appearance: none; height: 6px; border-radius: 99px;
  background: var(--line-2); outline: none;
}
input[type="range"].warm::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--clay); box-shadow: var(--sh-sm); cursor: pointer;
}
input[type="range"].warm::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--clay); box-shadow: var(--sh-sm); cursor: pointer;
}

/* fade/slide helpers — transform-only so content stays visible even if rAF is paused */
@keyframes riseIn { from { transform: translateY(9px); } to { transform: none; } }
@keyframes sheetUp { from { transform: translateY(22px); } to { transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { transform: translateY(10px); } to { transform: none; } }
@keyframes slideLeft { from { transform: translateX(28px); opacity: .6; } to { transform: none; opacity: 1; } }

/* Inline-editable poster text: discoverable on hover, clear on focus */
.pe-edit { border-radius: 3px; transition: background .12s, box-shadow .12s; }
.pe-edit:hover { background: rgba(125,110,90,.14); box-shadow: 0 0 0 4px rgba(125,110,90,.10); }
.pe-edit:focus { background: rgba(192,96,62,.12); box-shadow: 0 0 0 2px rgba(192,96,62,.55); }
.pe-edit:empty::before { content: "Tap to add"; opacity: .4; }

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .8s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}