/* ============================================================
   HOOF TRAVEL — design.css
   Single source of truth for tokens + base components.
   Stack target: vanilla HTML/CSS/JS. Mobile-first.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600;700&display=swap');

/* Custom brand font — main UI/text typeface */
@font-face{
  font-family:"Lebowski Pragmatica";
  src:url("fonts/Lebowski-Pragmatica.ttf") format("truetype");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}

/* ---------- TOKENS ---------- */
:root{
  /* surfaces */
  --paper:#f6f3ec;
  --paper-2:#efe9db;
  --paper-3:#e8e1cf;
  --card:#ffffff;
  --ink:#1c2017;
  --ink-soft:#5d6353;
  --muted:#8a907d;
  --line:#e6e0d0;
  --line-strong:#d8cfb8;

  /* brand accents */
  --forest:#2f4a35;
  --forest-700:#243a29;
  --forest-900:#16241a;
  --moss:#7c8f5a;
  --moss-200:#dbe2c4;
  --lime:#dce96b;
  --lime-bright:#e6f27a;
  --amber:#e07c3e;
  --amber-200:#f4d9c2;
  --red:#d6453b;
  --blue:#3a7d8d;
  --blue-200:#cfe0e3;

  /* night (map / dark blocks) */
  --night:#16190f;
  --night-2:#23271a;
  --night-line:#34392a;

  /* typography */
  --font-display:"Lebowski Pragmatica","Helvetica Neue",Arial,sans-serif; /* brand — all headings */
  --font-sans:"Inter","Helvetica Neue",Arial,sans-serif;                  /* readable UI + body text */
  --font-serif:"Lebowski Pragmatica","Helvetica Neue",Arial,sans-serif;   /* (serif retired → brand) */
  --font-mono:"Geist Mono",ui-monospace,"SFMono-Regular",monospace;

  /* type scale (mobile) */
  --t-display:54px;
  --t-h1:40px;
  --t-h2:30px;
  --t-h3:24px;
  --t-h4:20px;
  --t-lg:18px;
  --t-base:16px;
  --t-sm:14px;
  --t-cap:13px;
  --t-over:11px;

  /* spacing */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;

  /* radius */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-2xl:34px; --r-full:999px;

  /* shadow — soft, warm-tinted, never harsh */
  --sh-sm:0 1px 2px rgba(28,32,23,.06), 0 1px 1px rgba(28,32,23,.04);
  --sh-md:0 4px 14px rgba(28,32,23,.08), 0 2px 5px rgba(28,32,23,.05);
  --sh-lg:0 14px 38px rgba(28,32,23,.13), 0 5px 14px rgba(28,32,23,.07);
  --sh-xl:0 28px 70px rgba(28,32,23,.20), 0 10px 24px rgba(28,32,23,.10);

  --safe-top:54px;

  /* ─── Legacy aliases (for pages not yet migrated to new tokens) ─── */
  /* Surfaces */
  --background:var(--paper);
  --foreground:var(--ink);
  --card-foreground:var(--ink);
  --popover:var(--card);
  --popover-foreground:var(--ink);
  --primary:var(--forest);
  --primary-foreground:#f3f0e6;
  --secondary:var(--paper-2);
  --secondary-foreground:var(--ink);
  --muted-bg:var(--paper-2);
  --muted-foreground:var(--ink-soft);
  --accent:var(--moss-200);
  --accent-foreground:var(--forest-700);
  --destructive:var(--red);
  --destructive-foreground:#fff;
  --border:var(--line);
  --input:var(--line);
  --ring:var(--moss);
  /* Brand legacy names */
  --brand-forest:var(--forest);
  --brand-moss:var(--moss);
  --brand-lime:var(--lime);
  --brand-amber:var(--amber);
  --brand-amber-deep:#c9692f;
  --brand-paper:var(--paper);
  --brand-paper-2:var(--paper-2);
  --brand-paper-3:var(--paper-3);
  --brand-ink:var(--ink);
  --brand-night:var(--night);
  /* Legacy radii */
  --radius:var(--r-md);
  --radius-sm:var(--r-sm);
  --radius-md:var(--r-md);
  --radius-lg:var(--r-lg);
  --radius-xl:var(--r-xl);
  --radius-full:var(--r-full);
  /* Legacy shadows */
  --shadow-sm:var(--sh-sm);
  --shadow:var(--sh-sm);
  --shadow-md:var(--sh-md);
  --shadow-lg:var(--sh-lg);
  --shadow-xl:var(--sh-xl);
  /* Legacy safe-area */
  --st:env(safe-area-inset-top);
  --sb:env(safe-area-inset-bottom);
}

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

/* ---------- TYPOGRAPHY ---------- */
.display,.h1,.h2,.h3,.h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.015em;
  line-height:1.02;
  margin:0;
  color:var(--ink);
  font-optical-sizing:auto;
  text-wrap:balance;
}
.display{font-size:var(--t-display);line-height:.98;letter-spacing:-.03em}
.h1{font-size:var(--t-h1);line-height:1.02;letter-spacing:-.025em}
.h2{font-size:var(--t-h2);line-height:1.08;letter-spacing:-.02em}
.h3{font-size:var(--t-h3);line-height:1.14}
.h4{font-size:var(--t-h4);line-height:1.2;font-weight:600}

.body-lg{font-size:var(--t-lg);line-height:1.5;margin:0}
.body{font-size:var(--t-base);line-height:1.55;margin:0}
.body-sm{font-size:var(--t-sm);line-height:1.5;margin:0}
.caption{font-size:var(--t-cap);line-height:1.4;color:var(--muted);margin:0}
.overline{
  font-family:var(--font-mono);
  font-size:var(--t-over);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
  font-weight:500;
  margin:0;
}
.mono{font-family:var(--font-mono)}
.serif{font-family:var(--font-serif)}
.descriptor{font-family:var(--font-display);font-style:normal;font-weight:600}
.ink-soft{color:var(--ink-soft)}
.muted{color:var(--muted)}

/* ---------- BUTTONS ---------- */
.btn{
  font-family:var(--font-sans);
  font-weight:700;
  font-size:15px;
  line-height:1;
  border:none;
  border-radius:var(--r-full);
  padding:15px 22px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  cursor:pointer;
  transition:transform .12s ease, background .15s ease, box-shadow .15s ease;
  white-space:nowrap;
  text-decoration:none;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn svg{width:18px;height:18px;flex:none}
.btn--primary{background:var(--forest);color:#f3f0e6}
.btn--primary:hover{background:var(--forest-700)}
.btn--lime{background:var(--lime);color:var(--forest-900)}
.btn--lime:hover{background:var(--lime-bright)}
.btn--amber{background:var(--amber);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-strong)}
.btn--ghost:hover{background:var(--paper-2)}
.btn--dark{background:var(--ink);color:var(--paper)}
.btn--block{display:flex;width:100%}
.btn--sm{padding:10px 15px;font-size:13px}
.btn--lg{padding:18px 26px;font-size:16px}

/* ---------- CARD ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
}

/* ---------- BADGE / CHIP ---------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:700;
  padding:5px 10px;border-radius:var(--r-full);
  letter-spacing:.01em;
}
.badge--forest{background:rgba(47,74,53,.1);color:var(--forest)}
.badge--moss{background:var(--moss-200);color:var(--forest-700)}
.badge--lime{background:var(--lime);color:var(--forest-900)}
.badge--amber{background:var(--amber-200);color:#9a4a18}
.badge--blue{background:var(--blue-200);color:#235764}
.badge--ink{background:var(--ink);color:var(--paper)}
.badge--glass{background:rgba(255,255,255,.85);color:var(--ink);backdrop-filter:blur(8px)}

.chip{
  display:inline-flex;align-items:center;gap:7px;
  font-size:14px;font-weight:600;color:var(--ink-soft);
  padding:10px 15px;border-radius:var(--r-full);
  background:var(--card);border:1.5px solid var(--line);
  cursor:pointer;transition:all .14s ease;white-space:nowrap;
}
.chip svg{width:16px;height:16px}
.chip:hover{border-color:var(--line-strong)}
.chip--active{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- INPUT ---------- */
.input{
  width:100%;font-family:var(--font-sans);font-size:15px;
  padding:14px 16px;border-radius:var(--r-md);
  background:var(--card);border:1.5px solid var(--line);
  color:var(--ink);
}
.input::placeholder{color:var(--muted)}
.input:focus{outline:none;border-color:var(--moss);box-shadow:0 0 0 3px rgba(124,143,90,.18)}
.search{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;border-radius:var(--r-full);
  background:var(--card);border:1.5px solid var(--line);
  box-shadow:var(--sh-sm);
}
.search svg{width:19px;height:19px;color:var(--muted);flex:none}
.search input{border:none;background:none;outline:none;font-family:var(--font-sans);font-size:15px;width:100%;color:var(--ink)}

/* ---------- AVATAR ---------- */
.avatar{border-radius:var(--r-full);object-fit:cover;background:var(--paper-3);display:inline-block}
.avatar--ring{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--lime)}

/* ---------- TABS ---------- */
.tabs{display:flex;gap:4px;border-bottom:1.5px solid var(--line)}
.tab{
  flex:1;text-align:center;padding:13px 8px;font-weight:700;font-size:15px;
  color:var(--muted);border-bottom:2.5px solid transparent;margin-bottom:-1.5px;cursor:pointer;
}
.tab--active{color:var(--ink);border-color:var(--ink)}

/* ---------- SKELETON ---------- */
.skel{
  background:linear-gradient(100deg,var(--paper-2) 30%,var(--paper-3) 50%,var(--paper-2) 70%);
  background-size:200% 100%;
  animation:skel 1.4s ease-in-out infinite;
  border-radius:var(--r-sm);
}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- PHOTO PLACEHOLDER ---------- */
.ph{
  position:relative;overflow:hidden;
  background:
    repeating-linear-gradient(135deg,var(--paper-2),var(--paper-2) 11px,var(--paper-3) 11px,var(--paper-3) 22px);
  display:flex;align-items:center;justify-content:center;
}
.ph::after{
  content:attr(data-label);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  color:var(--ink-soft);text-transform:uppercase;
  background:var(--paper);padding:6px 11px;border-radius:var(--r-full);
  border:1px solid var(--line-strong);text-align:center;max-width:80%;
}
.ph--dark{
  background:repeating-linear-gradient(135deg,#2a2e20,#2a2e20 11px,#33392a 11px,#33392a 22px);
}
.ph--dark::after{background:var(--night);color:#b9bfa6;border-color:var(--night-line)}

/* ---------- HOOF COIN ---------- */
.hoof{
  display:inline-flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#f0a062,var(--amber) 70%);
  color:#fff;border-radius:var(--r-full);font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 5px rgba(224,124,62,.4);
}

/* ---------- iOS STATUS BAR ---------- */
.statusbar{
  height:var(--safe-top);display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 26px 9px;font-weight:700;font-size:15px;flex:none;
}
.statusbar .sb-icons{display:flex;align-items:center;gap:7px}
.statusbar svg{height:13px;width:auto}

/* ---------- BOTTOM NAV ---------- */
.bottomnav{
  display:flex;justify-content:space-around;align-items:center;
  padding:10px 8px 26px;background:var(--card);border-top:1px solid var(--line);
  flex:none;
}
.bottomnav a{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  font-size:11px;font-weight:600;color:var(--muted);text-decoration:none;flex:1;
}
.bottomnav a svg{width:23px;height:23px}
.bottomnav a.active{color:var(--forest)}

/* ---------- UTIL ---------- */
.row{display:flex;align-items:center}
.col{display:flex;flex-direction:column}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-5{gap:24px}
.grow{flex:1}