/* SHAA / Studio Habitar — Design Tokens (Notion-leaning)
   Equilíbrio puxado para o Notion: off-white quente, azul confiante,
   botões em pílula, acentos "sticker" lúdicos, serifa editorial nos títulos.
   Referência: docs/DESIGN.md. Importe ANTES de portal.css/site.css.
   No app Expo, espelhe em theme.ts. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  /* superfícies quentes (Notion) */
  --shaa-canvas: #F7F6F4;        /* fundo de página, papel calmo */
  --shaa-surface: #FFFFFF;       /* cartões/painéis */
  --shaa-surface-soft: #F1EFEC;  /* cartão quente, faixas */
  --shaa-surface-strong: #E8E5E0;

  /* tinta (Notion) */
  --shaa-ink: #191919;
  --shaa-ink-secondary: #37352F;
  --shaa-muted: #615D59;
  --shaa-faint: #A39E98;
  --shaa-hairline: #E6E4E0;

  /* ação — azul confiante do Notion */
  --shaa-primary: #0075DE;
  --shaa-primary-hover: #005BAB;
  --shaa-on-primary: #FFFFFF;
  --shaa-primary-soft: #E6F1FB;  /* fundo suave do azul (realces, links ativos) */

  /* acentos "sticker" (lúdicos, parcimônia — tags/status) */
  --shaa-sky: #62AEF0;
  --shaa-purple: #9B6DD6;
  --shaa-pink: #FF64C8;
  --shaa-orange: #DD5B00;
  --shaa-teal: #2A9D99;
  --shaa-green: #1AAE39;

  /* semânticas */
  --shaa-success: #1AAE39;
  --shaa-warning: #DD5B00;
  --shaa-error: #E5484D;

  /* tipografia — Inter em tudo (títulos bold), cara de produto limpa */
  --shaa-font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --shaa-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --shaa-font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* raio — botões em pílula (assinatura Notion) */
  --shaa-r-sm: 6px;
  --shaa-r-md: 8px;
  --shaa-r-lg: 12px;
  --shaa-r-xl: 16px;
  --shaa-r-pill: 9999px;

  /* espaçamento (base 4px) */
  --shaa-s-xxs: 4px;
  --shaa-s-xs: 8px;
  --shaa-s-sm: 12px;
  --shaa-s-md: 16px;
  --shaa-s-lg: 24px;
  --shaa-s-xl: 32px;
  --shaa-s-xxl: 48px;
  --shaa-s-section: 96px;

  /* sombras suaves */
  --shaa-shadow-sm: 0 1px 2px rgba(25, 25, 25, .05);
  --shaa-shadow-md: 0 4px 16px rgba(25, 25, 25, .07);
  --shaa-focus: 0 0 0 3px rgba(0, 117, 222, .22);
}

/* primitivos utilitários (opt-in, prefixo .shaa-) */
.shaa-h1 { font-family: var(--shaa-font-display); font-weight: 800; font-size: 40px; line-height: 1.1; letter-spacing: -1.5px; color: var(--shaa-ink); }
.shaa-h2 { font-family: var(--shaa-font-display); font-weight: 700; font-size: 28px; line-height: 1.25; letter-spacing: -.8px; color: var(--shaa-ink); }
.shaa-body { font-family: var(--shaa-font-sans); font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--shaa-ink-secondary); }

.shaa-btn { font-family: var(--shaa-font-sans); font-weight: 600; font-size: 14px; height: 40px; padding: 0 22px; border-radius: var(--shaa-r-pill); border: 1px solid transparent; cursor: pointer; transition: background .15s, box-shadow .15s; }
.shaa-btn-primary { background: var(--shaa-primary); color: var(--shaa-on-primary); }
.shaa-btn-primary:hover { background: var(--shaa-primary-hover); }
.shaa-btn-secondary { background: var(--shaa-surface); color: var(--shaa-ink); border-color: var(--shaa-hairline); }

.shaa-card { background: var(--shaa-surface); border: 1px solid var(--shaa-hairline); border-radius: var(--shaa-r-lg); padding: var(--shaa-s-lg); box-shadow: var(--shaa-shadow-sm); }
.shaa-card-soft { background: var(--shaa-surface-soft); border: none; border-radius: var(--shaa-r-lg); padding: var(--shaa-s-lg); }

.shaa-input { font-family: var(--shaa-font-sans); font-size: 16px; height: 40px; padding: 0 14px; background: var(--shaa-surface); border: 1px solid var(--shaa-hairline); border-radius: var(--shaa-r-md); color: var(--shaa-ink); }
.shaa-input:focus { outline: none; border-color: var(--shaa-primary); box-shadow: var(--shaa-focus); }

.shaa-badge { display: inline-block; font-family: var(--shaa-font-sans); font-weight: 500; font-size: 13px; padding: 4px 12px; border-radius: var(--shaa-r-pill); background: var(--shaa-primary-soft); color: var(--shaa-primary-hover); }