/* src/styles/tokens.css */
/* Tokens do Na Minha Tela (spec, seção 5). Os nomes semânticos de baixo são os que
   a base dos apps (src/shared/shared.css, vinda do meu-site) espera. */
:root {
  /* Paleta */
  --noite: #0E0F1A;
  --tela: #171A2B;
  --papel: #F3F1EA;
  --sinal: #FFD23F;
  --coral: #FF5C39;
  --azul: #3B4BFF;

  /* Papéis */
  --bg-page: var(--noite);
  --surface-raised: var(--tela);
  --text-on-dark: var(--papel);
  --text-muted: rgb(243 241 234 / 0.62);
  --text-accent: var(--sinal);
  --line: rgb(243 241 234 / 0.24);
  --focus-ring: var(--sinal);
  --focus-width: 3px;
  --focus-offset: 3px;

  /* Tipografia */
  --font-body: "Bricolage Grotesque", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --weight-body: 400;
  --weight-mono: 500;
  --weight-title: 800;
  --type-h1: clamp(2.25rem, 5vw + 0.5rem, 3.75rem);
  --type-body: 1rem;
  --type-button: 1rem;
  --type-label: 0.875rem;
  --type-caption: 0.8125rem;
  --leading-body: 1.5;
  --tracking-caps: 0.08em;

  /* Forma: tudo arredondado */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --border-width: 2px;

  /* Espaço */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Movimento */
  --dur-fast: 140ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* src/styles/site.css */
/* Base e moldura da página (header, título, rodapé, botões). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg-page); }
body {
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; } /* hidden sempre ganha do display dos componentes */
h1, h2, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
::selection { background: var(--sinal); color: var(--noite); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: min(100% - 2 * var(--space-5), 1200px); margin-inline: auto; }

/* Logo: "na minha tela" numa moldura arredondada, com um ponto amarelo. */
.site-header { padding-block: var(--space-6); }
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px; border: var(--border-width) solid var(--papel); border-radius: var(--radius-md);
  color: var(--papel); text-decoration: none; font-weight: 600; font-size: 1.125rem; line-height: 1;
}
.logo__dot { width: 10px; height: 10px; border-radius: var(--radius-circle); background: var(--sinal); }
.logo:hover { border-color: var(--sinal); }

.page-title { margin-top: var(--space-8); max-width: 15ch; font-weight: var(--weight-title); font-size: var(--type-h1); line-height: 1.02; letter-spacing: -0.02em; }
.page-title em { font-style: normal; color: var(--sinal); }
.page-lede { margin-top: var(--space-4); max-width: 52ch; font-size: 1.125rem; color: var(--text-muted); }

.btn {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: 52px; padding: 0 26px; border: 0; border-radius: var(--radius-pill);
  font-weight: 600; font-size: var(--type-button); line-height: 1;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.btn--primary { background: var(--sinal); color: var(--noite); }
.btn--primary:hover { background: #FFE070; }
.btn .icon { width: 20px; height: 20px; }

.btn--secondary { background: transparent; color: var(--papel); box-shadow: inset 0 0 0 var(--border-width) var(--papel); }
.btn--secondary:hover { color: var(--sinal); box-shadow: inset 0 0 0 var(--border-width) var(--sinal); }
.btn--dark { background: var(--noite); color: var(--sinal); }
.btn--dark:hover { background: var(--tela); }

.site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.site-header__cafe { padding: 9px 16px; border-radius: var(--radius-pill); background: var(--sinal); color: var(--noite); font-weight: 600; text-decoration: none; line-height: 1; }
.site-header__cafe:hover { background: #FFE070; }

.section-title { font-weight: var(--weight-title); font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem); line-height: 1.05; letter-spacing: -0.02em; }

/* Como funciona */
.how { padding-top: var(--space-16); }
.how__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-4); margin: var(--space-8) 0 0; padding: 0; list-style: none; }
.how__item { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--tela); }
.how__item h3 { margin: var(--space-4) 0 var(--space-2); font-size: 1.25rem; font-weight: 700; }
.how__item p { color: var(--text-muted); }
.how__n { display: inline-block; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--coral); color: var(--noite); font: 600 var(--type-caption)/1.2 var(--font-mono); }

/* Café: faixa amarela com Pix copia e cola e QR */
.cafe { margin-top: var(--space-16); background: var(--sinal); color: var(--noite); }
.cafe__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: center; padding-block: var(--space-12); }
@media (min-width: 768px) { .cafe__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-12); } }
.cafe__title { font-weight: var(--weight-title); font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem); line-height: 1.05; letter-spacing: -0.02em; }
.cafe__text > p { margin-top: var(--space-3); max-width: 52ch; }
.cafe__qr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.cafe__qr svg { width: 200px; height: 200px; padding: 10px; border-radius: var(--radius-lg); background: #FFFFFF; }
.cafe__qr figcaption { font-family: var(--font-mono); font-size: var(--type-caption); }
@media (max-width: 767px) { .cafe__qr { display: none; } } /* no celular não dá pra escanear a própria tela */

.pix { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); max-width: 560px; }
.pix__label { font-family: var(--font-mono); font-weight: 600; font-size: var(--type-caption); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.pix__row { display: flex; gap: var(--space-2); }
.pix__code {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 18px; border: var(--border-width) solid var(--noite); border-radius: var(--radius-pill);
  background: #FFFFFF; color: var(--noite); font: 400 var(--type-caption) var(--font-mono); text-overflow: ellipsis;
}
.pix__code:focus-visible { outline: var(--focus-width) solid var(--noite); outline-offset: 2px; }
.cafe :focus-visible, .sheet :focus-visible { outline-color: var(--noite); }

/* Folha do café no celular (dialog que sobe de baixo) */
.sheet {
  position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; margin: 0; padding: 0; border: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--sinal); color: var(--noite);
}
.sheet[open] { animation: sheet-up 280ms var(--ease-out); }
.sheet::backdrop { background: rgb(14 15 26 / 0.6); }
.sheet__body { display: flex; flex-direction: column; padding: var(--space-4) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); }
.sheet__grip { align-self: center; width: 44px; height: 5px; border-radius: var(--radius-pill); background: rgb(14 15 26 / 0.3); margin-bottom: var(--space-5); }
.sheet__title { font-weight: var(--weight-title); font-size: 1.5rem; line-height: 1.1; }
.sheet__body > p { margin-top: var(--space-2); }
.sheet .pix { margin-top: var(--space-5); }
.sheet__close { align-self: center; margin-top: var(--space-5); min-height: 44px; padding: 0 20px; border: 0; background: transparent; color: var(--noite); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sheet[open] { animation: none; } }

.site-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); padding-block: var(--space-12) var(--space-10); font-family: var(--font-mono); font-size: var(--type-caption); color: var(--text-muted); }

/* Crédito: "Desenvolvido por" + logo e nome, empurrado pra direita quando cabe na linha. */
.credit { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.credit a { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--papel); text-decoration: none; font-weight: 600; }
.credit a:hover { color: var(--sinal); }
.credit a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.credit__logo { flex: none; }
@media (max-width: 767px) { .credit { margin-left: 0; } }

/* src/shared/shared.css */
/* Base do app: layout ferramenta (controles + prévia), campos, segmentados, área de upload e miniaturas.
   Portado de meu-site/src/apps/_shared/shared.css, com a identidade nova: tudo arredondado,
   destaque Sinal (amarelo) no lugar do lima. */
.tool { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); padding-top: var(--space-12); align-items: start; }
@media (min-width: 1024px) {
  .tool { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-16); }
  .tool__preview { position: sticky; top: var(--space-6); order: 2; }
  .tool__controls { order: 1; }
}
.tool__controls { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.tool__preview { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.tool__stage {
  display: grid; place-items: center;
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  min-height: 240px;
}
.tool__stage canvas { display: block; max-width: 100%; height: auto; max-height: 72vh; width: auto; border-radius: var(--radius-md); }
@media (min-width: 1024px) { .tool__stage canvas { max-height: calc(100vh - 220px); } }
.tool__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.tool__status { min-height: 1.5em; font-family: var(--font-mono); font-size: var(--type-caption); color: var(--text-accent); }

/* Grupo de campos */
.field-group { display: flex; flex-direction: column; gap: var(--space-5); margin: 0; padding: 0; border: 0; min-width: 0; }
.field-group > legend { padding: 0; margin-bottom: var(--space-1); font-family: var(--font-mono); font-weight: var(--weight-mono); font-size: var(--type-label); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-accent); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.field > span { font-family: var(--font-mono); font-size: var(--type-caption); color: var(--text-on-dark); }
.field__hint { font-family: var(--font-mono); font-size: var(--type-caption); color: var(--text-muted); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 10px 14px;
  background: var(--tela); color: var(--text-on-dark);
  border: var(--border-width) solid var(--line); border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--type-body); line-height: 1.3;
}
.select { appearance: none; padding-right: 44px; background: var(--tela) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23FFD23F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center; }
.textarea { min-height: 112px; resize: vertical; line-height: var(--leading-body); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--sinal); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 0; border-color: var(--sinal); }
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input[type="number"] { font-family: var(--font-mono); }
.input--color { padding: 4px; min-height: 48px; cursor: pointer; }
.field-group__title { padding: 0; margin-bottom: var(--space-1); font-family: var(--font-mono); font-size: var(--type-caption); color: var(--text-on-dark); }

/* Segmentado: rádios com cara de pílula */
.seg { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.seg > legend { width: 100%; }
.seg__opt { position: relative; display: inline-flex; }
.seg__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg__opt span {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 8px 18px;
  border: var(--border-width) solid var(--line); border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-weight: var(--weight-mono); font-size: var(--type-label); line-height: 1;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.seg__opt:hover span { border-color: var(--sinal); color: var(--sinal); }
.seg__opt input:checked + span { background: var(--sinal); border-color: var(--sinal); color: var(--noite); }
.seg__opt input:focus-visible + span { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.seg__swatch { width: 16px; height: 16px; border-radius: var(--radius-circle); border: var(--border-width) solid var(--papel); flex: none; }
.seg--tabs .seg__opt span { font-size: var(--type-button); min-height: 52px; padding: 10px 24px; }
.seg__swatch[style*="transparent"] { background: var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 16L16 0' stroke='%23FF5C39' stroke-width='3'/%3E%3C/svg%3E") !important; }

/* Checkbox em linha */
.check { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; cursor: pointer; font-family: var(--font-mono); font-size: var(--type-caption); }
.check input { width: 22px; height: 22px; accent-color: var(--sinal); margin: 0; flex: none; }

/* Miniaturas da estante (lista reordenável) */
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.thumbs:empty { display: none; }
.thumbs li { position: relative; display: flex; flex-direction: column; gap: var(--space-1); }
.thumbs img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--surface-raised); border-radius: var(--radius-sm); }
.thumbs__n { position: absolute; top: 4px; left: 4px; padding: 2px 7px; border-radius: var(--radius-pill); background: var(--sinal); color: var(--noite); font: 600 12px/1.2 var(--font-mono); }
.thumbs__bar { display: flex; gap: 2px; }
.thumbs__bar button { flex: 1; min-height: 32px; padding: 0; border: 0; border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--papel); font: 600 14px/1 var(--font-mono); }
.thumbs__bar button:hover { background: var(--sinal); color: var(--noite); }
.thumbs__bar button:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 0; }

/* Botão pequeno de texto dentro da ferramenta */
.mini-btn { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border: var(--border-width) solid var(--line); border-radius: var(--radius-pill); background: transparent; color: var(--papel); font: var(--weight-mono) var(--type-caption)/1 var(--font-mono); }
.mini-btn:hover { border-color: var(--sinal); color: var(--sinal); }

/* Painéis e campos que trocam com as abas e opções */
[data-panel][hidden], [data-bg-image-only][hidden], [data-custom-only][hidden], [data-hide-in][hidden] { display: none; }

/* Range */
.range { width: 100%; height: 32px; background: transparent; appearance: none; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radius-pill); background: var(--line); }
.range::-moz-range-track { height: 6px; border-radius: var(--radius-pill); background: var(--line); }
.range::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: var(--radius-circle); background: var(--sinal); border: 0; }
.range::-moz-range-thumb { width: 22px; height: 22px; border-radius: var(--radius-circle); background: var(--sinal); border: 0; }
.range:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Área de upload */
.drop {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-2);
  min-height: 120px; padding: var(--space-6);
  border: var(--border-width) dashed var(--sinal); border-radius: var(--radius-lg); background: var(--tela);
  cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.drop__title { font-family: var(--font-mono); font-weight: 600; font-size: var(--type-button); color: var(--text-accent); }
.drop__hint { font-family: var(--font-mono); font-size: var(--type-caption); color: var(--text-muted); }
.drop:hover, .drop.is-over { background: var(--sinal); }
.drop:hover .drop__title, .drop.is-over .drop__title, .drop:hover .drop__hint, .drop.is-over .drop__hint { color: var(--noite); }
.drop:has(input:focus-visible) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }

/* Sem JS, o app não funciona: avisa em vez de mostrar controles mortos. */
.tool-nojs { margin-top: var(--space-8); padding: var(--space-6); border: var(--border-width) solid var(--coral); border-radius: var(--radius-lg); font-family: var(--font-mono); }
html.js .tool-nojs { display: none; }
html:not(.js) .tool { display: none; }

/* Celular e tablet: a prévia vem antes dos controles (e menor), pra ver o resultado enquanto edita. */
@media (max-width: 1023px) {
  .tool__preview { order: -1; }
  .tool__stage canvas { max-height: 52vh; }
}