/* ============================================================
   DOSSI — design tokens & global styles
   Gen-Z travel canvas. Postage / stamp / scrapbook aesthetic.
   ============================================================ */

:root {
  /* palette — cream paper, charcoal ink, deep-rose signature, coastal pastels */
  --paper:       #F8F4EE;   /* cream */
  --paper-2:     #EFE6D8;   /* soft sand */
  --paper-3:     #E1D4BF;   /* deeper sand — borders */
  --ink:         #141210;   /* charcoal */
  --ink-soft:    #6E6459;
  --ink-faint:   #9C9286;
  --sunset:      #C25A78;   /* deep rose — signature accent */
  --sunset-deep: #A23E5F;
  --accent-ink:  #8E3350;   /* deep rose ink — legible small text on paper */
  /* coastal pastels — paired with pickInk()=dark ink */
  --gold:        #E5B83B;   /* golden yellow */
  --blush:       #EBA0B5;   /* rose */
  --wave:        #7FD6D2;   /* seafoam */
  --lime:        #B8CF7A;   /* pistachio — fresh accent */
  --lemon:       #69C3F2;   /* riviera blue */

  /* fonts */
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-stamp:   'Archivo Black', sans-serif;
  --font-bubble:  'Unbounded', sans-serif;
  --font-serif:   'Instrument Serif', serif;
  --font-body:    'Archivo', sans-serif;

  /* phone */
  --phone-w: 390px;
  --phone-h: 844px;
  --radius:  20px;

  --shadow-card:  0 1px 2px rgba(44,39,35,0.05), 0 6px 16px -11px rgba(44,39,35,0.22);
  --shadow-pop:   0 12px 32px -18px rgba(44,39,35,0.42);
  --shadow-frame: 0 1px 3px rgba(44,39,35,0.10);
  --frame-line:   1px solid rgba(44,39,35,0.07);
}

/* ── Riviera theme keeps the cream/sand/charcoal neutrals; only the accent
   (Riviera Blue) changes, applied inline from the tweak system. Secondaries
   lean cooler. ── */
:root[data-theme="riviera"] {
  --wave:  #69C3F2;   /* riviera blue */
  --blush: #F2C2D0;   /* light pink — soft warm accent */
  --lemon: #7FD6D2;   /* seafoam */
}

/* seafoam — cool teal signature, greens & blues as secondaries (no pink) */
:root[data-theme="seafoam"] {
  --wave:  #7FD6D2;   /* seafoam */
  --blush: #B8CF7A;   /* pistachio */
  --lemon: #69C3F2;   /* riviera blue */
}

/* olive — fresh garden green signature, gold & pistachio secondaries (no pink) */
:root[data-theme="olive"] {
  --wave:  #B8CF7A;   /* pistachio */
  --blush: #E5B83B;   /* golden */
  --lemon: #B8CF7A;   /* pistachio */
}

/* amber — warm terracotta signature, gold & seafoam secondaries (no pink) */
:root[data-theme="amber"] {
  --wave:  #7FD6D2;   /* seafoam */
  --blush: #E5B83B;   /* golden */
  --lemon: #E5B83B;   /* golden */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: #D8CBB4;
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* faint paper-grain backdrop behind the phone */
body {
  background-image:
    radial-gradient(circle at 18% 22%, rgba(194,90,120,0.10), transparent 40%),
    radial-gradient(circle at 82% 78%, rgba(127,214,210,0.16), transparent 42%),
    radial-gradient(circle at 60% 10%, rgba(229,184,59,0.12), transparent 38%);
  display: grid;
  place-items: center;
  overflow: hidden;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; color: inherit; }
::-webkit-scrollbar { width: 0; height: 0; }
*  { scrollbar-width: none; }

/* ---------- phone shell ---------- */
#stage { position: relative; }

.phone {
  position: relative;
  width: var(--phone-w);
  height: var(--phone-h);
  background: var(--paper);
  border-radius: 52px;
  box-shadow:
    0 0 0 2px #1c1916,
    0 0 0 13px #2c2723,
    0 0 0 15px #44392f,
    0 40px 90px -30px rgba(0,0,0,0.7);
  overflow: hidden;
  transform-origin: center center;
}

.phone__screen {
  position: absolute;
  inset: 0;
  border-radius: 52px;
  overflow: hidden;
  background: var(--paper);
}

/* ---------- embed mode (?embed=1) ----------
   When Dossi runs inside the pitch site's phone frame, keep its OWN device
   bezel and uniform scale-to-fit (so the 390px layout renders exactly as
   designed, just scaled) — only drop the tan stage background so it sits
   cleanly on the host page with no phone-in-a-phone effect.

   The default body uses `display:grid; place-items:center`, whose implicit
   column grows to the phone's UNSCALED 390px width — so inside a narrower
   iframe the phone's center lands right of the viewport center and the right
   edge clips. Flex-centering inside a viewport-locked, overflow-hidden body
   makes the oversized (pre-scale) phone box overflow symmetrically and stay
   truly centered, so the scaled phone always sits fully inside the frame. */
html.embed, html.embed body { background: transparent; background-image: none; }
html.embed body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
}
/* In embed mode the iframe clips its rectangular bounds, so the phone's big soft
   drop-shadow gets cut into a hard rectangular edge. Keep only the tight bezel
   rings (which the fit-scale already budgets for) and drop the outer glow. */
html.embed .phone {
  box-shadow:
    0 0 0 2px #1c1916,
    0 0 0 13px #2c2723,
    0 0 0 15px #44392f;
}

/* status bar */
.statusbar {
  position: absolute; top: 0; left: 0; right: 0; height: 54px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 30px; padding-top: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  color: var(--ink); z-index: 50; pointer-events: none;
}
.statusbar .sb-right { display: flex; align-items: center; gap: 7px; }
.dynamic-island {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 116px; height: 33px; background: #15120f; border-radius: 20px; z-index: 60;
}

/* home indicator */
.home-indicator {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 134px; height: 5px; border-radius: 3px; background: rgba(44,39,35,0.32); z-index: 70;
  pointer-events: none;
}

/* scroll viewport inside the phone */
.screen-scroll {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ---------- bottom nav ---------- */
.tabbar {
  position: absolute; left: 12px; right: 12px; bottom: 14px; height: 64px;
  background: rgba(44,39,35,0.96);
  border-radius: 26px;
  display: flex; align-items: center; justify-content: space-around;
  padding: 0 10px; z-index: 40;
  box-shadow: var(--shadow-pop);
}
.tabbar button {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: rgba(244,236,223,0.55); font-size: 10px; font-weight: 700;
  letter-spacing: 0.02em; padding: 6px 8px; transition: color .15s;
}
.tabbar button.active { color: var(--paper); }
.tabbar button svg { width: 23px; height: 23px; }
.tabbar .tab-create {
  background: var(--sunset); color: #fff; width: 50px; height: 50px;
  border-radius: 16px; justify-content: center; transform: translateY(-2px);
  box-shadow: 0 6px 16px -8px rgba(44,39,35,0.5);
}
.tabbar .tab-create svg { width: 26px; height: 26px; }

/* ---------- reusable bits ---------- */
.eyebrow {
  font-family: var(--font-stamp); text-transform: uppercase;
  letter-spacing: 0.22em; font-size: 11px; color: var(--accent-ink);
}
.serif-it { font-family: var(--font-serif); font-style: italic; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 100px; font-weight: 700; font-size: 12.5px;
  background: var(--paper-2); color: var(--ink); border: 1.5px solid var(--paper-3);
  white-space: nowrap;
}
.pill.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 20px; border-radius: 16px; font-weight: 800; font-size: 15px;
  background: var(--sunset-deep); color: #fff; box-shadow: 0 4px 12px -8px rgba(44,39,35,0.5);
  transition: transform .12s;
}
.btn:active { transform: scale(0.97); }
.btn.ghost { background: var(--paper-2); color: var(--ink); box-shadow: none; border: 1.5px solid var(--paper-3); }
.btn.ink { background: var(--ink); color: var(--paper); box-shadow: none; }

/* perforated stamp edge — used on stamp chips/cards */
.stamp-edge {
  --d: 7px;
  background:
    radial-gradient(circle at center, transparent 0 calc(var(--d) - 1px), var(--paper) var(--d)) ;
}

/* image-slot empty-state, tuned to paper aesthetic */
image-slot {
  --is-bg: var(--paper-2);
  --is-fg: var(--ink-soft);
  --is-border: var(--paper-3);
  background: var(--paper-2);
  display: block;
}

/* tape strip */
.tape {
  position: absolute; width: 64px; height: 22px;
  background: rgba(229,184,59,0.45);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
  z-index: 5;
}

/* dashed postcard divider */
.dash {
  border: none; border-top: 2px dashed var(--paper-3); margin: 0;
}

/* avatar */
.ava {
  border-radius: 50%; background: var(--paper-3); object-fit: cover;
  border: 2px solid var(--paper); flex-shrink: 0; overflow: hidden;
}

.no-select { user-select: none; -webkit-user-select: none; }