/* ───────────────────────────────────────────────────────────
   Scuola di Stile · Decluttering — design tokens & base
   Brand sampled from scuoladistile.com:
   navy #002255 · magenta #CC0066 · powder-blue #A8D2E0 · blush/cream
   ─────────────────────────────────────────────────────────── */
:root{
  --navy:#002255;
  --navy-700:#0a2e63;
  --navy-600:#1a4486;
  --ink:#0c1c33;
  --ink-soft:rgba(12,28,51,.62);
  --ink-faint:rgba(12,28,51,.40);

  --magenta:#cc0066;
  --magenta-600:#b1005a;
  --magenta-050:#fbe7f1;

  --sky:#a8d2e0;
  --sky-300:#cfe6ee;
  --sky-600:#5f93a8;
  --sky-700:#3d7388;

  --blush:#f7ece8;
  --blush-200:#fbf4f1;
  --cream:#fbf7f3;
  --paper:#ffffff;

  --line:rgba(0,34,85,.10);
  --line-2:rgba(0,34,85,.16);
  --shadow-card:0 1px 2px rgba(0,34,85,.04), 0 8px 28px rgba(0,34,85,.07);
  --shadow-pop:0 8px 24px rgba(0,34,85,.12), 0 24px 60px rgba(0,34,85,.16);

  /* decision spectrum */
  --pos:#1f8a5b;       /* keep / green */
  --pos-700:#176c46;
  --neg:#c43c2b;       /* give away / terracotta-red */
  --neg-700:#9c2e20;
  --calm:#4b86a0;      /* neutral blue start */

  --r-lg:26px;
  --r-md:18px;
  --r-sm:12px;

  --font-display:"Playfair Display", Georgia, serif;
  --font-body:"Hanken Grotesk", -apple-system, system-ui, sans-serif;
  --font-mono:"DM Mono", ui-monospace, monospace;
}

*{box-sizing:border-box;}
html,body,#root{margin:0;padding:0;height:100%;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  /* warm letterbox surround, only visible on wide (desktop) viewports */
  background:radial-gradient(120% 90% at 18% 0%, #fbf4f1 0%, #efe7df 46%, #e4ddd4 100%);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* full-viewport mobile app surface (frameless).
   Capped width keeps the mobile-first layout phone-shaped on desktop;
   on a phone it fills the screen edge-to-edge. */
.app-shell{
  position:relative;
  width:100%;
  max-width:480px;
  height:100dvh;
  margin:0 auto;
  overflow:hidden;
  background:var(--cream);
  box-shadow:0 0 60px rgba(0,34,85,.12);
}

.app-scroll{
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.app-scroll::-webkit-scrollbar{display:none;}

/* typographic helpers */
.serif{font-family:var(--font-display);}
.mono{font-family:var(--font-mono);}
.eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.tnum{font-variant-numeric:tabular-nums;}

/* buttons */
.btn{
  font-family:var(--font-body);
  font-weight:650;
  font-size:16px;
  border:none;
  border-radius:999px;
  padding:15px 22px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, opacity .2s;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.btn:active{transform:scale(.975);}
.btn-primary{background:var(--magenta);color:#fff;box-shadow:0 6px 18px rgba(204,0,102,.28);}
.btn-primary:hover{background:var(--magenta-600);}
.btn-navy{background:var(--navy);color:#fff;box-shadow:0 6px 18px rgba(0,34,85,.22);}
.btn-navy:hover{background:var(--navy-700);}
.btn-ghost{background:transparent;color:var(--navy);border:1.5px solid var(--line-2);}
.btn-ghost:hover{background:rgba(0,34,85,.04);}
.btn-block{width:100%;}
.btn:disabled{opacity:.42;cursor:default;transform:none;}

/* form fields */
.field{
  width:100%;
  font-family:var(--font-body);
  font-size:16px;
  color:var(--ink);
  background:var(--paper);
  border:1.5px solid var(--line-2);
  border-radius:14px;
  padding:14px 16px;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.field::placeholder{color:var(--ink-faint);}
.field:focus{border-color:var(--sky-600);box-shadow:0 0 0 3px rgba(95,147,168,.18);}
.field-label{
  display:block;
  font-size:12.5px;
  font-weight:650;
  letter-spacing:.02em;
  color:var(--ink-soft);
  margin:0 0 7px 3px;
}

/* card */
.card{
  background:var(--paper);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
}
.hair{height:1px;background:var(--line);border:none;margin:0;}

/* animations — transform/scale only (never strand content invisible
   if the animation timeline is paused or interrupted mid-navigation) */
@keyframes fadeUp{from{transform:translateY(13px);}to{transform:none;}}
@keyframes fadeIn{from{transform:scale(.995);}to{transform:none;}}
@keyframes popIn{0%{transform:scale(.92);}100%{transform:scale(1);}}
@keyframes sheenSweep{0%{transform:translateX(-120%);}100%{transform:translateX(120%);}}
@keyframes slideUpSheet{from{transform:translateY(100%);}to{transform:translateY(0);}}
@keyframes ringDraw{from{stroke-dashoffset:var(--dash);}to{stroke-dashoffset:var(--off);}}
@keyframes pushDrop{0%{transform:translateY(-26px);}100%{transform:translateY(0);}}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes slideInRight{from{transform:translateX(100%);}to{transform:translateX(0);}}
@keyframes fadeOpacity{from{opacity:0;}to{opacity:1;}}

.fade-up{animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) both;}
.fade-in{animation:fadeIn .4s ease both;}
.pop-in{animation:popIn .45s cubic-bezier(.2,.8,.2,1) both;}

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