/* =====================================================================
   Desbagunça — Tokens: cores, temas, tipografia, espaços e medidas
   ---------------------------------------------------------------------
   Carregado ANTES de todos os outros arquivos. Nenhum outro arquivo
   deve ter cor, tamanho de fonte ou espaçamento fixo: use os tokens.

   Identidade: as cores e o "encaixe" do ícone (verde + laranja).
   • Verde-folha  = ação principal, confirmação, "feito"
   • Laranja      = destaque, atenção, convites, prioridade
   • Azul         = informação e ações secundárias
   Use SEMPRE os tokens semânticos (--bg, --texto, --primaria…): eles
   mudam sozinhos entre tema claro e escuro. As escalas (--verde-500…)
   ficam para ilustrações e casos específicos.

   Tipografia e espaços de layout são FLUIDOS (clamp entre 360 e 1280px
   de largura): crescem sozinhos do celular ao computador, sem precisar
   de breakpoint só para mudar tamanho.

   Breakpoints (CSS não aceita variáveis em @media, então use os números):
     960px  barra lateral → menu inferior + botão flutuante
     640px  celular: modais centralizados quase na largura toda, grades viram 1 coluna
     380px  celular compacto: esconde o que é secundário
   Linhas de lista usam container queries (largura do CARTÃO, não da tela).

   Hierarquia de cantos: container 22 · cartão 16 · controle 12 · chip pílula
   Sombra só no que flutua (menus, modais, toasts, botão flutuante).
   ===================================================================== */
:root {
  /* ---------- Escalas (tiradas do ícone: verde #1B9E60, laranja #F37A1E) ---------- */
  --verde-50: #edfaf3;   /* menta clara */
  --verde-100: #d2f2e1;
  --verde-200: #a6e3c3;
  --verde-300: #6fcf9e;  /* menta */
  --verde-400: #3bb87c;
  --verde-500: #1b9e60;  /* folha (marca) */
  --verde-600: #13824d;
  --verde-700: #10683f;  /* mata */
  --verde-800: #0e5133;
  --verde-900: #0b3b26;  /* floresta */

  --laranja-50: #fff5ec;  /* pêssego claro */
  --laranja-100: #ffe6d0;
  --laranja-200: #ffca9e;
  --laranja-300: #ffa866; /* damasco */
  --laranja-400: #fb8c3a;
  --laranja-500: #f37a1e; /* abóbora (marca) */
  --laranja-600: #d9620d;
  --laranja-650: #c4570a;
  --laranja-700: #b34d0b; /* telha */
  --laranja-800: #8c3c0e;

  --azul-50: #eef4ff;    /* céu claro */
  --azul-100: #dce8ff;
  --azul-200: #b9d0ff;
  --azul-300: #8db2fb;
  --azul-400: #5d90f2;
  --azul-500: #2f6fe0;   /* azul */
  --azul-600: #2563d4;
  --azul-700: #1c4ca8;   /* anil */

  --vermelho-50: #fff1f1;
  --vermelho-100: #fddcdd;
  --vermelho-300: #ff8a8d;
  --vermelho-500: #e5484d;
  --vermelho-600: #c9363b;

  --branco: #ffffff;
  /* Camadas claras sobre fundos escuros/coloridos (toast, faixa verde, chips ativos) */
  --sobre-cor-1: rgba(255, 255, 255, .14);
  --sobre-cor-2: rgba(255, 255, 255, .24);
  --sobre-cor-3: rgba(255, 255, 255, .36);

  /* ---------- Tema claro ---------- */
  color-scheme: light;
  --bg: #f3f6f3;
  --bg-elevado: #ffffff;
  --bg-sutil: #f6f9f6;
  --bg-hover: #eaf0eb;
  --bg-vidro: rgba(243, 246, 243, .84);
  --bg-vidro-elevado: rgba(255, 255, 255, .92);
  --borda: #dfe7e1;
  --borda-forte: #c3d0c7;
  --texto: #14231b;
  --texto-2: #4a5b51;
  --texto-3: #647469;
  --texto-inverso: #ffffff;

  --primaria: #13824d;
  --primaria-hover: #10683f;
  --primaria-suave: #ecf8f1;
  --primaria-suave-2: #cfeedd;
  --primaria-texto: #0f6b40;

  --destaque: #f37a1e;
  --destaque-hover: #fb8c3a;
  --destaque-tinta: #2a1204;      /* texto sobre o laranja (contraste 6.4) */
  --destaque-suave: #fff3e8;
  --destaque-suave-2: #ffdcbd;
  --destaque-texto: #a84a08;

  --info: #2563d4;
  --info-hover: #1c4ca8;
  --info-suave: #eef4ff;
  --info-suave-2: #d3e2ff;
  --info-texto: #1c4ca8;

  --perigo: #d93f44;
  --perigo-hover: #b8302f;
  --perigo-suave: #fff0f0;
  --perigo-suave-2: #fbd3d4;
  --perigo-texto: #b3262b;

  --hero-1: #1b9e60;
  --hero-2: #13824d;
  --hero-3: #0b3b26;

  --anel-foco: 0 0 0 3px rgba(37, 99, 212, .35);
  --sombra-xs: 0 1px 2px rgba(20, 35, 27, .05);
  --sombra-sm: 0 1px 2px rgba(20, 35, 27, .05), 0 2px 6px -2px rgba(20, 35, 27, .06);
  --sombra: 0 12px 28px -12px rgba(20, 35, 27, .22), 0 2px 6px -2px rgba(20, 35, 27, .06);
  --sombra-lg: 0 28px 64px -20px rgba(11, 59, 38, .32), 0 8px 18px -10px rgba(20, 35, 27, .14);
  --sombra-flutuante: 0 30px 60px -24px rgba(0, 0, 0, .55);
  --sombra-fab: 0 16px 30px -12px rgba(16, 104, 63, .85), inset 0 -2px 0 rgba(0, 0, 0, .14);
  --sombra-botao: inset 0 -2px 0 rgba(0, 0, 0, .14);
  --sombra-pino: 0 2px 4px rgba(0, 0, 0, .2);
  --overlay: rgba(10, 26, 18, .45);
  --toast-bg: #14231b;
  --toast-texto: #f1f6f2;

  /* ---------- Agenda: uma cor por categoria de evento (cor · fundo suave · texto) ---------- */
  --ag-compromisso: #2f6fe0;  --ag-compromisso-suave: #e8f0ff;  --ag-compromisso-texto: #1c4ca8;
  --ag-saude: #e5484d;        --ag-saude-suave: #fdeced;        --ag-saude-texto: #b3262b;
  --ag-aniversario: #f37a1e;  --ag-aniversario-suave: #fff0e3;  --ag-aniversario-texto: #a84a08;
  --ag-escola: #7c5cdb;       --ag-escola-suave: #f1edfd;       --ag-escola-texto: #5636b5;
  --ag-lazer: #1b9e60;        --ag-lazer-suave: #e5f6ed;        --ag-lazer-texto: #0f6b40;
  --ag-contas: #c99700;       --ag-contas-suave: #fdf5d8;       --ag-contas-texto: #7d5c00;
  --ag-casa: #0e98a5;         --ag-casa-suave: #e0f5f7;         --ag-casa-texto: #0a6670;
  --ag-tarefa: #647469;       --ag-tarefa-suave: #eef2ef;       --ag-tarefa-texto: #3d4d44;

  /* ---------- Mural: paleta dos itens (cheia · fundo suave · texto · tinta sobre a cheia) ---------- */
  --mural-ambar: #f5b301;     --mural-ambar-suave: #fff6d6;     --mural-ambar-texto: #7a5300;     --mural-ambar-tinta: #2e2000;
  --mural-coral: #f26b4f;     --mural-coral-suave: #ffede8;     --mural-coral-texto: #a8331b;     --mural-coral-tinta: #2e0c05;
  --mural-rosa: #e8508f;      --mural-rosa-suave: #fdebf3;      --mural-rosa-texto: #a8245e;      --mural-rosa-tinta: #2e0716;
  --mural-violeta: #7c5cdb;   --mural-violeta-suave: #f1edfd;   --mural-violeta-texto: #5636b5;   --mural-violeta-tinta: #ffffff;
  --mural-azul: #2563d4;      --mural-azul-suave: #e8f0ff;      --mural-azul-texto: #1c4ca8;      --mural-azul-tinta: #ffffff;
  --mural-turquesa: #14a8b5;  --mural-turquesa-suave: #e0f6f7;  --mural-turquesa-texto: #0a6670;  --mural-turquesa-tinta: #04282c;
  --mural-verde: #2fae6e;     --mural-verde-suave: #e5f6ed;     --mural-verde-texto: #0f6b40;     --mural-verde-tinta: #032414;
  --mural-grafite: #4a5b51;   --mural-grafite-suave: #eef2ef;   --mural-grafite-texto: #3d4d44;   --mural-grafite-tinta: #ffffff;

  /* ---------- Tipografia (fluida 360 → 1280px) ---------- */
  --fonte: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-titulo: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --fonte-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

  --fs-2xs: clamp(0.7188rem, 0.7065rem + 0.054vw, 0.75rem);    /* 11.5 → 12   contadores, selos */
  --fs-xs: clamp(0.7812rem, 0.769rem + 0.054vw, 0.8125rem);    /* 12.5 → 13   dicas, metadados */
  --fs-sm: clamp(0.8438rem, 0.8315rem + 0.054vw, 0.875rem);    /* 13.5 → 14   rótulos, botões */
  --fs-base: clamp(0.9375rem, 0.9253rem + 0.054vw, 0.9688rem); /* 15 → 15.5   corpo */
  --fs-md: clamp(1.0312rem, 1.0068rem + 0.109vw, 1.0938rem);   /* 16.5 → 17.5 título de cartão */
  --fs-lg: clamp(1.1875rem, 1.1141rem + 0.326vw, 1.375rem);    /* 19 → 22     título de seção */
  --fs-xl: clamp(1.5rem, 1.3533rem + 0.652vw, 1.875rem);       /* 24 → 30     título de página */
  --fs-2xl: clamp(1.5rem, 1.1087rem + 1.739vw, 2.5rem);        /* 24 → 40     saudação, login */
  --fs-3xl: clamp(2.125rem, 1.2rem + 1.6vw, 3.125rem);         /* 34 → 50     chamada do login (só desktop) */
  --fs-micro: 10px;        /* só iniciais em avatares de 24–26px e números de selos */
  --fs-campo-toque: 16px;  /* campos no toque: abaixo disso o iPhone dá zoom */
  --fs-codigo: clamp(1.25rem, 1rem + 1.2vw, 1.875rem);         /* código de convite */

  /* ---------- Espaços (base 4px) ---------- */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-8: 32px;
  --e-10: 40px;
  --e-16: 64px;
  /* Layout fluido */
  --pagina-x: clamp(14px, 3vw, 36px);      /* margem lateral da página */
  --pagina-gap: clamp(14px, 1.6vw, 24px);  /* distância entre blocos */
  --card-p: clamp(16px, 1.2vw + 11px, 24px);

  /* ---------- Medidas ---------- */
  --raio-xs: 6px;
  --raio-sm: 9px;
  --raio: 12px;
  --raio-lg: clamp(14px, .25vw + 13px, 16px);
  --raio-xl: clamp(18px, .5vw + 16px, 22px);

  --toque-min: 44px;   /* alvo de toque mínimo */
  --controle-h: 44px;  /* botões e campos padrão */
  --controle-lg: clamp(48px, .45vw + 46px, 52px);
  --controle-sm: 36px;
  --menu-inferior-h: 76px; /* menu inferior + folga, para nada ficar escondido atrás dele */

  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-mola: cubic-bezier(.34, 1.4, .64, 1);
  --transicao: .16s var(--ease);
}

/* ---------- Tema escuro: floresta à noite ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1713;
  --bg-elevado: #16211b;
  --bg-sutil: #1b2822;
  --bg-hover: #223129;
  --bg-vidro: rgba(14, 23, 19, .84);
  --bg-vidro-elevado: rgba(22, 33, 27, .94);
  --borda: #26362d;
  --borda-forte: #3a4d42;
  --texto: #e8efea;
  --texto-2: #b9c7bf;
  --texto-3: #8fa197;
  --texto-inverso: #ffffff;

  --primaria: #1a8a55;
  --primaria-hover: #1b9e60;
  --primaria-suave: rgba(59, 184, 124, .12);
  --primaria-suave-2: rgba(59, 184, 124, .24);
  --primaria-texto: #7bdda8;

  --destaque: #f37a1e;
  --destaque-hover: #fb8c3a;
  --destaque-suave: rgba(251, 140, 58, .12);
  --destaque-suave-2: rgba(251, 140, 58, .26);
  --destaque-texto: #ffb877;

  --info: #3d7ae6;
  --info-hover: #5d90f2;
  --info-suave: rgba(93, 144, 242, .13);
  --info-suave-2: rgba(93, 144, 242, .26);
  --info-texto: #a9c6ff;

  --perigo: #d93f44;
  --perigo-hover: #e8555a;
  --perigo-suave: rgba(255, 99, 104, .12);
  --perigo-suave-2: rgba(255, 99, 104, .26);
  --perigo-texto: #ffa3a6;

  --hero-1: #157a4a;
  --hero-2: #0f5c38;
  --hero-3: #082a1b;

  --anel-foco: 0 0 0 3px rgba(141, 178, 251, .45);
  --sombra-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --sombra-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px -2px rgba(0, 0, 0, .3);
  --sombra: 0 14px 32px -12px rgba(0, 0, 0, .6), 0 2px 6px -2px rgba(0, 0, 0, .3);
  --sombra-lg: 0 30px 70px -18px rgba(0, 0, 0, .75), 0 8px 20px -8px rgba(0, 0, 0, .4);
  --sombra-fab: 0 16px 30px -12px rgba(0, 0, 0, .7), inset 0 -2px 0 rgba(0, 0, 0, .14);
  --overlay: rgba(0, 0, 0, .6);
  --toast-bg: #233229;
  --toast-texto: #eef4f0;

  --ag-compromisso: #5d90f2;  --ag-compromisso-suave: rgba(93, 144, 242, .17);  --ag-compromisso-texto: #b3ccff;
  --ag-saude: #ff6b70;        --ag-saude-suave: rgba(255, 107, 112, .16);       --ag-saude-texto: #ffadb0;
  --ag-aniversario: #fb8c3a;  --ag-aniversario-suave: rgba(251, 140, 58, .17);  --ag-aniversario-texto: #ffbd85;
  --ag-escola: #a48ff2;       --ag-escola-suave: rgba(164, 143, 242, .19);      --ag-escola-texto: #d0c4ff;
  --ag-lazer: #3bb87c;        --ag-lazer-suave: rgba(59, 184, 124, .17);        --ag-lazer-texto: #86e1b0;
  --ag-contas: #e6b422;       --ag-contas-suave: rgba(230, 180, 34, .17);       --ag-contas-texto: #f4d47c;
  --ag-casa: #2fc1cc;         --ag-casa-suave: rgba(47, 193, 204, .16);         --ag-casa-texto: #94e6ec;
  --ag-tarefa: #8fa197;       --ag-tarefa-suave: rgba(143, 161, 151, .15);      --ag-tarefa-texto: #c8d4cd;

  --mural-ambar: #e8b324;     --mural-ambar-suave: rgba(232, 179, 36, .16);   --mural-ambar-texto: #f4d47c;     --mural-ambar-tinta: #2a1d00;
  --mural-coral: #f2785d;     --mural-coral-suave: rgba(242, 120, 93, .16);   --mural-coral-texto: #ffb3a1;     --mural-coral-tinta: #2a0b04;
  --mural-rosa: #ee6aa2;      --mural-rosa-suave: rgba(238, 106, 162, .16);   --mural-rosa-texto: #ffb0d0;      --mural-rosa-tinta: #2a0614;
  --mural-violeta: #a48ff2;   --mural-violeta-suave: rgba(164, 143, 242, .18); --mural-violeta-texto: #d0c4ff;  --mural-violeta-tinta: #170d3a;
  --mural-azul: #5d90f2;      --mural-azul-suave: rgba(93, 144, 242, .17);    --mural-azul-texto: #b3ccff;      --mural-azul-tinta: #04122e;
  --mural-turquesa: #2fc1cc;  --mural-turquesa-suave: rgba(47, 193, 204, .16); --mural-turquesa-texto: #94e6ec; --mural-turquesa-tinta: #032326;
  --mural-verde: #3bb87c;     --mural-verde-suave: rgba(59, 184, 124, .17);   --mural-verde-texto: #86e1b0;     --mural-verde-tinta: #032013;
  --mural-grafite: #8fa197;   --mural-grafite-suave: rgba(143, 161, 151, .15); --mural-grafite-texto: #c8d4cd;  --mural-grafite-tinta: #0e1713;
}