// Tema da janela (paleta do iced) — também elimina o fundo branco padrão.
theme "styles/theme.json"

// Estilos COM ESCOPO, escritos INLINE no próprio template.
// Em KDL não há tag de fechamento: o corpo GSS vai numa string multilinha
// (""" ... """). O parser distingue inline de arquivo pela presença de `{` /
// quebra de linha — `style "styles/app.gss"` continuaria sendo um link externo.
// As classes só valem dentro deste componente; o hot-reload recarrega junto.
style """
.card {
  padding: 28;
  background: #1E1E2E;
  border-radius: 18;
  border-width: 1;
  border-color: #313244;
  align-x: Center;
}

.stack   {
  spacing: 18; align-x: Center;
}

.title   {
  size: 28; bold: true; color: #CDD6F4;
}

.valor   {
  size: 40; bold: true; color: #89B4FA;
}

.actions {
  spacing: 14;
}

// `btn` dá a base; `btn-mais`/`btn-menos` só trocam a cor.
.btn     {
  padding: 10 22; color: #11111B;
}

.btn-mais  {
  background: #A6E3A1;
}

.btn-menos {
  background: #F38BA8;
}

.dica {
  size: 13; color: #6C7086;
}
"""

Container padding="40" alignX="Center" alignY="Center" width="fill" height="fill" {
  Container class="card" {
    Column class="stack" {
      Text "Estilos inline (KDL)" class="title"
      Text "{valor}" class="valor"

      Row class="actions" {
        Button "−" onClick="decrementar" class="btn btn-menos"
        Button "+" onClick="incrementar" class="btn btn-mais"
      }

      // Atributo inline vence a classe: esta cor ganha de `.dica`.
      Text "edite o bloco style e veja o hot-reload" class="dica" color="#7F849C"
    }
  }
}
