/* css/base.css — tokens, reset, typography */
:root {
  --bg: #090A0F;
  --bg-soft: #10121B;
  --panel: rgba(255,255,255,.05);
  --panel-strong: rgba(255,255,255,.09);
  --line: rgba(255,255,255,.12);

  --text: #F5F5F2;
  --muted: #9A9BA3;
  --muted-2: #6D6F78;

  --gold: #D4AF37;
  --gold-soft: rgba(212,175,55,.18);

  --orange: #FFB066;
  --orange-soft: rgba(255,176,102,.18);

  --negative-outline: #C8795B;
  --negative-soft: rgba(200,121,91,.12);

  --positive-outline: #67B88A;
  --positive-soft: rgba(103,184,138,.12);

  --blue-tick: #59A9F8;
  --grey-tick: #7B7E88;

  --radius: 14px;
  --radius-sm: 10px;
  --ease: 220ms ease;

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: inherit; }

html {
  height: 100%;
  scroll-padding-top: env(safe-area-inset-top, 0px);
  background: var(--bg);
}

body {
  margin: 0;
  height: 100%;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app { min-height: 100dvh; display: flex; flex-direction: column; }

h1, h2, h3 { margin: 0 0 .4em; font-weight: 600; }
p { margin: 0 0 .6em; line-height: 1.45; color: var(--text); }

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input, select {
  font-family: inherit;
  font-size: 16px; /* prevents iOS zoom on focus */
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .7em .8em;
  width: 100%;
}

input:focus, select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.icon {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text);
  opacity: .92;
}
.icon svg { width: 100%; height: 100%; display: block; stroke: currentColor; fill: none; }

.muted-tag { color: var(--muted); font-size: .9em; }
.empty-state { color: var(--muted); padding: 2em 0; text-align: center; }

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

.link-btn { color: var(--muted); text-decoration: underline; padding: .6em 0; }
.link-btn.danger { color: var(--negative-outline); }
.back-link { color: var(--muted); padding: .6em 0; }