/* Pastinha brand tokens. One source for the app, the site and the plan. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  --ink: #15171c;
  --ink-2: #4a4f5a;
  --ink-3: #7d828c;
  --paper: #f4f1ea;
  --paper-2: #ebe6db;
  --white: #fffdf8;
  --azul: #1d3fc4;
  --azul-deep: #132a86;
  --azul-wash: rgba(29, 63, 196, 0.08);
  --sun: #e9a514;
  --sun-wash: rgba(233, 165, 20, 0.14);
  --leaf: #2c8a57;
  --leaf-wash: rgba(44, 138, 87, 0.1);
  --red: #c2412d;
  --red-wash: rgba(194, 65, 45, 0.1);
  --line: rgba(21, 23, 28, 0.12);
  --line-2: rgba(21, 23, 28, 0.22);
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --r: 10px;
  --r-lg: 16px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--azul); color: var(--white); }

/* the one motif: a short hairline dash */
.dash { display: inline-block; width: 14px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 10px; opacity: 0.55; }
ul.dashes { list-style: none; padding: 0; margin: 0; }
ul.dashes li { position: relative; padding-left: 26px; }
ul.dashes li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 14px; height: 1px; background: currentColor; opacity: 0.55; }

/* pills = buttons; square chips = tags */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-2); background: transparent; border-radius: 999px;
  padding: 8px 15px; font-size: 14px; font-weight: 500; cursor: pointer; line-height: 1.2; text-decoration: none;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease), transform 0.12s var(--ease);
}
.pill:hover { border-color: var(--ink); }
.pill:active { transform: scale(0.98); }
.pill.solid { background: var(--ink); border-color: var(--ink); color: var(--white); }
.pill.solid:hover { background: var(--azul); border-color: var(--azul); }
.pill.azul { background: var(--azul); border-color: var(--azul); color: var(--white); }
.pill.azul:hover { background: var(--azul-deep); border-color: var(--azul-deep); }
.pill.on { background: var(--azul-wash); border-color: var(--azul); color: var(--azul-deep); }
.pill[disabled] { opacity: 0.4; cursor: not-allowed; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500;
  padding: 3px 8px; border-radius: 4px; background: var(--azul-wash); color: var(--azul-deep); line-height: 1.4; white-space: nowrap;
}
.chip.sun { background: var(--sun-wash); color: #8a5c00; }
.chip.leaf { background: var(--leaf-wash); color: #1d6540; }
.chip.red { background: var(--red-wash); color: #8f2a1b; }
.chip.ink { background: rgba(21, 23, 28, 0.06); color: var(--ink-2); }

.link { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 1px; }
.link:hover { color: var(--azul); font-weight: inherit; }

.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 650; letter-spacing: -0.04em; font-size: 22px; line-height: 1; }
.brand svg { width: 26px; height: 26px; flex: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}