<!-- Tema da janela (paleta do iced) — também elimina o fundo branco padrão. -->
<link rel="theme" href="styles/theme.json" />

<!--
  Estilos COM ESCOPO, escritos INLINE no próprio template.
  O corpo do <style> é GSS (mesma gramática do .gss), e as classes só valem
  dentro deste componente — sem precisar de um arquivo .gss separado.
  Edite os valores abaixo com a app rodando: 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;
  }
</style>


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

      <Row class="actions">
        <Button class="btn btn-menos" text="−" onClick="decrementar" />
        <Button class="btn btn-mais" text="+" onClick="incrementar" />
      </Row>

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