/* ============================================================================
   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; }

@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; }
  }
}

: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; }
}