/* ============================================================================
   Carta Viva — tokens
   ----------------------------------------------------------------------------
   Nenhum componente escreve uma cor a mao. Todos leem daqui.
   E o que faz o segundo tema sair de graca, sem ficar um canto por converter.

   Tres estados, nao dois:
     :root                          -> tema claro (base)
     prefers-color-scheme: dark     -> escuro, quando o visitante nao escolheu
     [data-theme="dark"|"light"]    -> escolha explicita, ganha ao sistema
   ========================================================================= */

:root {
  /* superficies */
  --bg:            #FAFAFA;
  --surface:       #FFFFFF;
  --surface-2:     #F0F0F0;
  --border:        #DBDBDB;
  --border-soft:   #EFEFEF;

  /* texto */
  --text:          #262626;
  --text-2:        #737373;
  --text-3:        #A8A8A8;

  /* accoes */
  --accent:        #0095F6;
  --accent-hover:  #1877F2;
  --like:          #FF3040;
  --star:          #C8931E;

  /* alergenios — a cor agrupa por familia, o icone identifica.
     Cinco familias distinguem-se; catorze cores nao. */
  --fam-cereais:      #4F6B2A;
  --fam-cereais-bg:   #EDF2E2;
  --fam-mar:          #16607F;
  --fam-mar-bg:       #E2EFF5;
  --fam-animal:       #8A6410;
  --fam-animal-bg:    #F6EEDA;
  --fam-frutos:       #8E4620;
  --fam-frutos-bg:    #F7E9E1;
  --fam-aditivos:     #6A2F6A;
  --fam-aditivos-bg:  #F2E7F2;

  /* elevacao */
  --shadow-sheet:  0 -2px 24px rgba(0, 0, 0, .12);
  --overlay:       rgba(0, 0, 0, .55);

  /* medidas — o feed do Instagram na web tem 470px de largura util */
  --feed-width:    470px;
  --header-h:      56px;
  --nav-h:         50px;
  --radius:        8px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #000000;
    --surface:     #121212;
    --surface-2:   #1C1C1C;
    --border:      #262626;
    --border-soft: #1F1F1F;

    --text:        #F5F5F5;
    --text-2:      #A8A8A8;
    --text-3:      #737373;

    --accent:       #0095F6;
    --accent-hover: #3AABFF;
    --like:         #FF3040;
    --star:         #E8B93E;

    --fam-cereais:     #A9C578;
    --fam-cereais-bg:  #1B2312;
    --fam-mar:         #6FBADD;
    --fam-mar-bg:      #0E2330;
    --fam-animal:      #E0B84E;
    --fam-animal-bg:   #2A2211;
    --fam-frutos:      #E09A72;
    --fam-frutos-bg:   #2C1B12;
    --fam-aditivos:    #C58BC5;
    --fam-aditivos-bg: #251826;

    --shadow-sheet: 0 -2px 24px rgba(0, 0, 0, .6);
    --overlay:      rgba(0, 0, 0, .75);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:          #000000;
  --surface:     #121212;
  --surface-2:   #1C1C1C;
  --border:      #262626;
  --border-soft: #1F1F1F;

  --text:        #F5F5F5;
  --text-2:      #A8A8A8;
  --text-3:      #737373;

  --accent:       #0095F6;
  --accent-hover: #3AABFF;
  --like:         #FF3040;
  --star:         #E8B93E;

  --fam-cereais:     #A9C578;
  --fam-cereais-bg:  #1B2312;
  --fam-mar:         #6FBADD;
  --fam-mar-bg:      #0E2330;
  --fam-animal:      #E0B84E;
  --fam-animal-bg:   #2A2211;
  --fam-frutos:      #E09A72;
  --fam-frutos-bg:   #2C1B12;
  --fam-aditivos:    #C58BC5;
  --fam-aditivos-bg: #251826;

  --shadow-sheet: 0 -2px 24px rgba(0, 0, 0, .6);
  --overlay:      rgba(0, 0, 0, .75);

  color-scheme: dark;
}

/* ============================================================================
   Cores por categoria

   Vivem aqui, e nao na folha da carta, porque sao usadas pelas duas interfaces:
   o cartao tipografico do feed e o bloco do prato sem fotografia na app de
   entregas. Duplica-las seria garantir que divergiam na primeira vez que
   alguem acrescentasse uma categoria.
   ========================================================================= */

/* Uma cor por categoria — o feed ganha ritmo e a categoria lê-se antes do texto.
   Valores próprios do tema claro; o bloco escuro a seguir redefine-os todos. */
.dishcard--entradas   { --dc-bg: #EDF2E2; --dc-ink: #33421B; }
.dishcard--saladas    { --dc-bg: #E6F1E4; --dc-ink: #22421F; }
.dishcard--massas     { --dc-bg: #F6EEDA; --dc-ink: #4A3608; }
.dishcard--pizzas     { --dc-bg: #F7E9E1; --dc-ink: #55250E; }
.dishcard--risotto    { --dc-bg: #F1EDE2; --dc-ink: #45391B; }
.dishcard--carnes     { --dc-bg: #F4E5E5; --dc-ink: #4E1D1D; }
.dishcard--peixe      { --dc-bg: #E2EFF5; --dc-ink: #12384B; }
.dishcard--sobremesas { --dc-bg: #F5E7EE; --dc-ink: #4A1B33; }
.dishcard--crepes     { --dc-bg: #F2E7F2; --dc-ink: #3E1C3E; }
.dishcard--gelado     { --dc-bg: #E8EEF6; --dc-ink: #1F3050; }
.dishcard--bebidas      { --dc-bg: #E3EEF4; --dc-ink: #163647; }
.dishcard--cocktails    { --dc-bg: #F6E6EA; --dc-ink: #5A1F33; }
.dishcard--vinhos       { --dc-bg: #F0E3E8; --dc-ink: #4B1526; }
.dishcard--espirituosas { --dc-bg: #EFE9DD; --dc-ink: #4A3410; }
.dishcard--cafetaria    { --dc-bg: #EDE6E0; --dc-ink: #3F2A1C; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    .dishcard--entradas   { --dc-bg: #1B2312; --dc-ink: #C4D89A; }
    .dishcard--saladas    { --dc-bg: #16220F; --dc-ink: #B6D4AE; }
    .dishcard--massas     { --dc-bg: #2A2211; --dc-ink: #E6C87A; }
    .dishcard--pizzas     { --dc-bg: #2C1B12; --dc-ink: #EDAE86; }
    .dishcard--risotto    { --dc-bg: #23200F; --dc-ink: #D9CC9C; }
    .dishcard--carnes     { --dc-bg: #2A1414; --dc-ink: #E39A9A; }
    .dishcard--peixe      { --dc-bg: #0E2330; --dc-ink: #8FCBE8; }
    .dishcard--sobremesas { --dc-bg: #2A1220; --dc-ink: #EBA0C4; }
    .dishcard--crepes     { --dc-bg: #251826; --dc-ink: #D3A6D3; }
    .dishcard--gelado     { --dc-bg: #131E2E; --dc-ink: #9DBBE4; }
    .dishcard--bebidas      { --dc-bg: #0F2530; --dc-ink: #9CCBE3; }
    .dishcard--cocktails    { --dc-bg: #2C1420; --dc-ink: #EBA3BC; }
    .dishcard--vinhos       { --dc-bg: #2A1119; --dc-ink: #E39AAE; }
    .dishcard--espirituosas { --dc-bg: #29220F; --dc-ink: #DFC48A; }
    .dishcard--cafetaria    { --dc-bg: #241A12; --dc-ink: #D3B59B; }
  }
}

:root[data-theme="dark"] {
  .dishcard--entradas   { --dc-bg: #1B2312; --dc-ink: #C4D89A; }
  .dishcard--saladas    { --dc-bg: #16220F; --dc-ink: #B6D4AE; }
  .dishcard--massas     { --dc-bg: #2A2211; --dc-ink: #E6C87A; }
  .dishcard--pizzas     { --dc-bg: #2C1B12; --dc-ink: #EDAE86; }
  .dishcard--risotto    { --dc-bg: #23200F; --dc-ink: #D9CC9C; }
  .dishcard--carnes     { --dc-bg: #2A1414; --dc-ink: #E39A9A; }
  .dishcard--peixe      { --dc-bg: #0E2330; --dc-ink: #8FCBE8; }
  .dishcard--sobremesas { --dc-bg: #2A1220; --dc-ink: #EBA0C4; }
  .dishcard--crepes     { --dc-bg: #251826; --dc-ink: #D3A6D3; }
  .dishcard--gelado     { --dc-bg: #131E2E; --dc-ink: #9DBBE4; }
  .dishcard--bebidas      { --dc-bg: #0F2530; --dc-ink: #9CCBE3; }
  .dishcard--cocktails    { --dc-bg: #2C1420; --dc-ink: #EBA3BC; }
  .dishcard--vinhos       { --dc-bg: #2A1119; --dc-ink: #E39AAE; }
  .dishcard--espirituosas { --dc-bg: #29220F; --dc-ink: #DFC48A; }
  .dishcard--cafetaria    { --dc-bg: #241A12; --dc-ink: #D3B59B; }
}

/* ============================================================================
   Personalizar o prato (2.0)

   Os chips do ponto da carne, dos ingredientes a tirar e a juntar, e da base
   da «Faça a sua pizza». Vivem aqui pela mesma razão das cores de categoria:
   a folha da loja e o painel da mesa desenham exactamente o mesmo, e duas
   cópias divergiam na primeira correcção. Só tokens partilhados.
   ========================================================================= */
.pz { margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.pz__titulo {
  display: block; padding: 0; margin: 0 0 4px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-2);
}
.pz__dica { margin: 0 0 8px; font-size: 13px; color: var(--text-3); line-height: 1.35; }
.pz__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.pz__chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 0 13px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 999px;
  font: inherit; font-size: 14px; line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pz__chip:hover { background: var(--surface-2); }
/* Escolhido: ponto, base, ou ingrediente juntado. */
.pz__chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
/* Tirado: fica à vista, riscado — a pessoa tem de ver o que já não vem. */
.pz__chip.is-removed { background: var(--surface-2); color: var(--text-3); border-style: dashed; }
.pz__chip.is-removed .pz__nome { text-decoration: line-through; }
/* A base (o molho) não se toca. */
.pz__chip--base { color: var(--text-3); border-color: transparent; background: var(--surface-2); cursor: default; }

.pz__badge { font-size: 12px; font-weight: 600; color: var(--text-3); }
.pz__badge:empty { display: none; }
.pz__badge.is-free { color: #2E7D4F; }
.pz__chip[aria-pressed="true"] .pz__badge { color: inherit; opacity: .8; }
.pz__chip[aria-pressed="true"] .pz__badge.is-free { color: #8FE0B0; }