/* Shared by every page of localspots.io: tokens mirroring
 * the light palette in apps/mobile/src/constants/theme.ts, base type,
 * buttons, nav, fields, footer. Page-specific styles stay inline per page. */
:root{
  --bg:#F3EFE7;
  --surface:#FCFAF5;
  --elem:#FCFAF5;
  --elem-2:#EAE4D8;
  --border:#E1D9CB;
  --border-strong:#C9C0B0;
  --text:#1F1B16;
  --muted:#5E574E;
  --faint:#736B61;
  --accent:#B83E00;
  --accent-soft:rgba(184,62,0,.1);
  --accent-surface:#F7E6DA;
  --accent-line:rgba(184,62,0,.45);
  --success:#13733A;
  --success-soft:rgba(19,115,58,.1);
  --danger:#C81E1E;
  --danger-soft:rgba(200,30,30,.1);
  --favorite:#D0173F;
  --favorite-soft:rgba(208,23,63,.1);
  --walked:#8F887E;
  --brand-gradient:linear-gradient(120deg,#C10801 0%,#E04E00 50%,#B83E00 100%);
  --glass:rgba(252,250,245,.78);
  --glass-border:rgba(31,27,22,.1);
  --shadow:0 24px 60px -24px rgba(31,27,22,.28);
  --r-card:22px; --r-sheet:28px;
  --font-display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; text-wrap:balance; letter-spacing:-.02em;}
p{margin:0; text-wrap:pretty;}
a{color:inherit;}
img,svg{display:block; max-width:100%;}
[hidden]{display:none!important;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:8px;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.skip{position:absolute; left:16px; top:-60px; z-index:200; background:var(--accent); color:#fff; padding:10px 16px; border-radius:12px; font-weight:700; text-decoration:none;}
.skip:focus{top:12px;}
.wrap{max-width:1200px; margin-inline:auto; padding-inline:24px;}
@media (max-width:560px){ .wrap{padding-inline:16px;} }
.gradient-text{background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent;}
.ico{width:20px; height:20px; flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}

/* Buttons — the app's glass pills: orange "Create itinerary", neutral "Map view". */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font:600 15.5px/1 var(--font-body); color:var(--text); text-decoration:none; white-space:nowrap;
  padding:16px 26px; border-radius:999px; border:1px solid var(--glass-border); cursor:pointer;
  background:var(--glass); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  transition:transform .15s var(--ease), background-color .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.btn:hover{border-color:var(--border-strong);}
.btn:active{transform:scale(.97);}
.btn-accent{
  color:#fff; background:rgba(184,62,0,.9); border-color:var(--accent);
  box-shadow:0 12px 32px -12px rgba(184,62,0,.6), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-accent:hover{background:var(--accent); box-shadow:0 16px 40px -10px rgba(184,62,0,.7), inset 0 1px 0 rgba(255,255,255,.22);}
.btn-sm{padding:11px 18px; font-size:14px;}

/* Nav — sticky and frosted; the landing page floats it over its hero instead. */
.nav{position:sticky; top:0; z-index:50;}
.nav::before{content:""; position:absolute; inset:0; background:rgba(243,239,231,.8); backdrop-filter:blur(22px) saturate(1.5); -webkit-backdrop-filter:blur(22px) saturate(1.5); transition:opacity .3s ease; border-bottom:1px solid var(--glass-border);}
.nav .wrap{position:relative; display:flex; align-items:center; justify-content:space-between; height:72px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand img{width:34px; height:34px;}
.brand .word{font:700 20px/1 var(--font-display); letter-spacing:-.02em;}
.brand .tag{display:block; font:600 10.5px/1 var(--font-body); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-top:4px;}
.nav-links{display:flex; align-items:center; gap:28px; font-size:14.5px; font-weight:500; color:var(--muted);}
.nav-links a{text-decoration:none; transition:color .15s ease;}
.nav-links a:hover{color:var(--text);}
@media (max-width:900px){ .nav-links a:not(.btn){display:none;} }

.eyebrow{display:inline-block; font:700 12px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:18px;}

/* Footer */
footer{padding:80px 0 48px; border-top:1px solid var(--border); margin-top:96px;}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px;}
@media (max-width:700px){ .footer-grid{grid-template-columns:1fr 1fr;} .footer-grid > :first-child{grid-column:1/-1;} }
footer .tagline{margin-top:16px; color:var(--muted); font-size:14.5px; max-width:34ch;}
footer h2{font:700 12px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:18px;}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
footer ul a{text-decoration:none; font-size:14.5px; color:var(--muted);}
footer ul a:hover{color:var(--text);}
.legal{margin-top:56px; padding-top:24px; border-top:1px solid var(--border); font-size:13px; color:var(--faint); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;}

/* Inner-page header: title over a soft brand glow */
.page-hero{position:relative; padding:88px 0 40px; overflow:hidden; isolation:isolate;}
.page-hero::before{content:""; position:absolute; z-index:-1; width:680px; aspect-ratio:1; top:-340px; left:50%; transform:translateX(-10%); border-radius:50%; background:radial-gradient(circle, rgba(232,80,2,.16), transparent 62%); pointer-events:none;}
.page-hero h1{font-size:clamp(38px,6vw,64px); line-height:1.02; font-weight:800; letter-spacing:-.04em;}
.page-hero .lead{margin-top:18px; font-size:clamp(16px,1.5vw,18.5px); color:var(--muted); max-width:40em;}
@media (max-width:560px){ .page-hero{padding:56px 0 28px;} }

/* Cards and fields */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sheet);}
.field{display:grid; gap:8px; margin-bottom:20px;}
.label{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.input,.textarea{
  width:100%; font:500 16px/1.4 var(--font-body); color:var(--text);
  background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:14px 16px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder,.textarea::placeholder{color:var(--faint);}
.input:hover,.textarea:hover{border-color:var(--border-strong);}
.input:focus,.textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.textarea{resize:vertical; min-height:72px;}
.hint{font-size:13px; color:var(--faint);}
.alert{padding:12px 16px; border-radius:16px; border:1px solid rgba(200,30,30,.35); background:var(--danger-soft); color:var(--danger); font-size:14.5px;}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none;}
.btn-block{width:100%;}