/* Tokens de design — única fonte de cores, fontes e espaçamentos.
   Direção: azulejaria contemporânea. Cobalto, mostarda, verde-azulejo, flor de amendoeira. */

@font-face { font-family: "Manrope"; src: url("../fonts/manrope-var.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-normal.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-italico.woff2") format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }

:root {
  /* Paleta azulejo */
  --cobalto:    #17398A; /* azul profundo: marca, títulos (11:1 sobre branco) */
  --azul:       #2150B4; /* ação principal (7,6:1 sobre branco) */
  --azul-claro: #8FB4E8; /* desenho dos azulejos */
  --azul-gelo:  #E6EFFC; /* seleção, superfícies */
  --mostarda:   #EDB534; /* acento quente (texto por cima: tinta) */
  --verde:      #2E8B6F; /* verde-azulejo (4,6:1 sobre branco, só em texto grande) */
  --verde-2:    #1F6B54; /* verde para texto pequeno (6,6:1) */
  --coral:      #E4604A; /* tomate, marisco */
  --ameixa:     #7A2E5E; /* carne, beterraba */
  --amendoa:    #F7DDE2; /* flor de amendoeira */

  /* Neutros */
  --cal:        #FBFAF7; /* cal branca, fundo (levemente quente) */
  --branco:     #FFFFFF;
  --tinta:      #10203A; /* texto (16:1 sobre cal) */
  --tinta-2:    #54657A; /* texto secundário (5,7:1) */
  --linha:      #E4E6EA;
  --areia:      #F1E7D2;
  --leve:       #F3F1EA;

  /* Cada tipo de prato tem a sua cor de capa */
  --peixe-cor: var(--cobalto);   --marisco-cor: var(--coral);   --carne-cor: var(--ameixa);
  --ovos-cor: var(--mostarda);   --vegetariano-cor: var(--verde);

  /* Tipografia */
  --fonte: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --titulo: "Fraunces", Georgia, "Times New Roman", serif;
  --t-base: 1.125rem;
  --t-peq: 0.9375rem;
  --t-rotulo: 0.8125rem;
  --t-h1: clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem);
  --t-h2: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
  --t-h3: 1.3125rem;

  /* Espaçamentos */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 80px;

  /* Formas */
  --raio:   24px;
  --raio-m: 16px;
  --toque:  56px;
  --sombra:   0 1px 0 rgba(16, 32, 58, .04), 0 10px 30px rgba(23, 57, 138, .08);
  --sombra-2: 0 2px 4px rgba(16, 32, 58, .08), 0 18px 44px rgba(23, 57, 138, .18);

  /* Motivos de azulejo (padrão de 4 pétalas) para fundos */
  --motivo-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.16' stroke-width='1.6'%3E%3Cpath d='M24 4c7 6 7 14 0 20-7-6-7-14 0-20ZM44 24c-6 7-14 7-20 0 6-7 14-7 20 0ZM24 44c-7-6-7-14 0-20 7 6 7 14 0 20ZM4 24c6-7 14-7 20 0-6 7-14 7-20 0Z'/%3E%3Ccircle cx='24' cy='24' r='3.500'/%3E%3C/g%3E%3C/svg%3E");
  --motivo-azul: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%2317398A' stroke-opacity='.09' stroke-width='1.6'%3E%3Cpath d='M24 4c7 6 7 14 0 20-7-6-7-14 0-20ZM44 24c-6 7-14 7-20 0 6-7 14-7 20 0ZM24 44c-7-6-7-14 0-20 7 6 7 14 0 20ZM4 24c6-7 14-7 20 0-6 7-14 7-20 0Z'/%3E%3Ccircle cx='24' cy='24' r='3.500'/%3E%3C/g%3E%3C/svg%3E");
  /* Gradiente do herói */
  --gradiente: radial-gradient(110% 130% at 95% 110%, rgba(46, 160, 128, .85) 0%, rgba(46, 160, 128, 0) 52%), radial-gradient(80% 110% at 0% 0%, #2F6BD9 0%, rgba(47, 107, 217, 0) 62%), linear-gradient(140deg, #0F2A6C 0%, #17398A 48%, #2150B4 100%);
  --visto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.200' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.500l4.500 4.500L19 7.500'/%3E%3C/svg%3E");
}