/* Faz-Tudo Expresso Lacerda: tokens and shared pieces */

:root {
  --amarelo: #f2be22;
  --amarelo-forte: #e0a900;
  --grafite: #1b1c1e;
  --bg: #f2f2ef;
  --surface: #ffffff;
  --surface-2: #e7e7e3;
  --text: #1b1c1e;
  --muted: #5e6166;
  --line: rgb(27 28 30 / 0.12);
  --on-amarelo: #1b1c1e;
  --shadow: 0 20px 50px -24px rgb(27 28 30 / 0.35);

  /* shape: buttons 10px, cards/images 16px, small chips 6px */
  --r-btn: 10px;
  --r-card: 16px;
  --r-chip: 6px;

  --font: "Archivo", system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121315;
    --surface: #1c1d20;
    --surface-2: #26282b;
    --text: #ececE8;
    --muted: #a3a6ab;
    --line: rgb(236 236 232 / 0.12);
    --shadow: 0 20px 50px -24px rgb(0 0 0 / 0.7);
  }
}
:root[data-theme="dark"] {
  --bg: #121315;
  --surface: #1c1d20;
  --surface-2: #26282b;
  --text: #ececE8;
  --muted: #a3a6ab;
  --line: rgb(236 236 232 / 0.12);
  --shadow: 0 20px 50px -24px rgb(0 0 0 / 0.7);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

.wide { font-stretch: 125%; }

/* Logo: mark + wordmark */
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.logo svg { width: 38px; height: 38px; flex: none; }
.logo-words { display: grid; line-height: 1; }
.logo-name { font-weight: 800; font-stretch: 125%; font-size: 22px; letter-spacing: -0.02em; }
.logo-sub { font-weight: 600; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 22px;
  border-radius: var(--r-btn);
  font: 700 16px/1 var(--font);
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid transparent;
  transition: transform .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
}
.btn i { font-size: 20px; }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-primary { background: var(--amarelo); color: var(--on-amarelo); }
.btn-primary:hover { background: var(--amarelo-forte); }
.btn-ghost { border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--text); }
.btn-dark { background: var(--grafite); color: #f2f2ef; }
.btn-dark:hover { background: #000; }

:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; border-radius: 4px; }