/* base.css — tokens de design, reset e tipografia de base.
   Importado antes de layout.css e components.css. */

:root {
  /* ---- Paleta "Galeria do Colecionador" (warm dark) ----
     Diagnóstico Opus: #14181C era azul-frio (Letterboxd). Action figures
     vivem em vitrines com luz quente. Tudo migrou para tons de obsidiana/couro. */
  --bg:       #13110F;   /* preto quente — parede de museu          */
  --panel:    #1C1A17;   /* superfície elevada — card, modal, nav   */
  --panel-2:  #252220;   /* segunda elevação — inputs, hover         */
  --panel-3:  #302C29;   /* terceira elevação                        */

  /* Aliases semânticos (usados em código mais novo) */
  --surface:        var(--panel);
  --surface-raised: var(--panel-2);

  /* Texto */
  --text:           #F2EEE8;                    /* branco-papel (era #F0F2F5 frio) */
  --muted:          #8A847C;                    /* cinza quente (era #8899AA azulado) */
  --text-dim:       var(--muted);
  --text-secondary: rgba(242, 238, 232, 0.60);

  /* Accent / Marca */
  --accent:   #FF4D00;  /* laranja FIGTRACK */
  --accent-2: #CC3D00;
  --brand:    var(--accent);

  /* Tokens de valor (proposta Opus) */
  --gold: #E5A85F;   /* âmbar exclusivo para valor de mercado */
  --gain: #8FD18E;   /* verde quente para delta positivo      */
  --loss: #E58A7A;   /* coral/terracota para delta negativo   */

  /* Status — compatibilidade com badges existentes */
  --ok:     var(--gain);
  --warn:   #D4A847;
  --err:    #E06060;
  --danger: var(--err);

  /* Novos tokens semânticos */
  --accent-subtle:  #FF4D001A;   /* laranja translúcido p/ highlight/overlay */
  --success:        #4CAF7D;     /* verde confirmação (diferente de --gain) */
  --warning:        #F5A623;     /* âmbar alerta */
  --error:          #E53935;     /* vermelho erro destrutivo */
  --sentimental:    #C4A882;     /* bege item sentimental */
  --revelation:     #FFD700;     /* dourado valorização inesperada */
  --scan-line:      #FF4D00;     /* linha de scan da câmera */

  /* Bordas */
  --border:   rgba(255, 255, 255, 0.06);
  --border-2: rgba(255, 255, 255, 0.11);

  /* Raios — caixa acrílica, não consumer iOS */
  --r-xs:  4px;
  --r-sm:  8px;
  --r:     14px;
  --r-lg:  18px;
  --r-pill: 999px;

  /* Tipografia */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Animação */
  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   500ms;
  --easing-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

input, textarea, select {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  outline: none;
  width: 100%;
  transition: border-color 0.15s;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
}

input::placeholder, textarea::placeholder {
  color: var(--muted);
}

/* Remove o X e lupa nativos do type=search */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { display: none; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  padding: 32px 16px;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.2px;
}

h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--muted);
  margin: 0;
}

/* Usar em labels de seção que precisam de caps — não no h2 global */
.heading--upper {
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.sub {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 24px;
}

footer {
  margin-top: 24px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Scan-line: desce da borda superior à inferior em loop */
@keyframes scanMove {
  0%   { top: 0; opacity: 1; }
  85%  { top: calc(100% - 2px); opacity: 1; }
  100% { top: calc(100% - 2px); opacity: 0; }
}

/* Spring entry: sobe do rodapé com bounce */
@keyframes springUp {
  0%   { transform: translateY(40px) scale(0.96); opacity: 0; }
  60%  { transform: translateY(-6px) scale(1.01); opacity: 1; }
  80%  { transform: translateY(3px) scale(0.99); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Toast slide-in + fade-out */
@keyframes toastIn {
  from { transform: translateY(20px) scale(0.95); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-8px) scale(0.97); }
}