/* Tokens do Planner: cores (claro e escuro), grade de 4 px, raios, sombras, tipos e camadas.
   Paleta Rosa antigo (escolhida pela Kailany em 21/10/2026): verde #3F5E45 nos botões e pontos principais,
   rosa antigo nos destaques, base clara, texto escuro (regra do cofre: cor da letra pelo fundo). Contraste medido. */

:root {
  color-scheme: light dark;

  /* ---------- Paleta bruta (claro) ---------- */
  --papel: #f3e8ea;
  --painel: #ffffff;
  --faixa: #f5e1e5;
  --tinta: #231c20;
  --tinta-suave: #464144;
  --linha: #e3cdd3;
  --salvia: #3f5e45;
  --salvia-escura: #3f5e45;
  --terracota: #9a4652;   /* rosa antigo forte (contadores, destaques com letra branca) */
  --rosa: #b8636e;        /* rosa antigo médio (linha da hora, ilustrações) */
  --lavanda: #7a6aa8;
  --mel: #8a6a1f;

  /* Cores padrão das áreas (editáveis pela usuária) */
  --area-pessoal: #9a4652;
  --area-profissional: #2e6a85;
  --area-rotina: #5e7a2c;

  /* ---------- Papéis semânticos (é isto que os componentes usam) ---------- */
  --c-fundo: var(--papel);
  --c-painel: var(--painel);
  --c-faixa: var(--faixa);
  --c-texto: var(--tinta);
  --c-texto-suave: var(--tinta-suave);
  --c-linha: var(--linha);
  --c-borda-campo: #8a7b80;          /* borda de campo e de check, ≥ 3:1 sobre o painel */
  --c-marca: var(--salvia-escura);   /* fundo de botão primário */
  --c-marca-forte: #34503a;          /* hover do botão primário */
  --c-sobre-marca: #ffffff;          /* letra sobre a marca */
  --c-marca-texto: var(--tinta);     /* texto clicável: preto em negrito (a marca fica no fundo, regra do cofre) */
  --c-marca-suave: #e4ece5;          /* fundo suave de seleção */
  --c-marca-suave-borda: #b5c9b6;
  --c-destaque: var(--rosa);
  --c-destaque-texto: var(--tinta);  /* títulos de destaque em texto escuro (nada de texto pintado) */
  --c-destaque-suave: #f5e1e5;       /* pendências: rosa antigo claro, nunca vermelho alarme */
  --c-destaque-suave-borda: #c98c96;
  --c-foco: #1f6f8b;
  --c-veu: rgba(35, 28, 32, 0.42);
  --c-hover: rgba(35, 28, 32, 0.05);
  --c-esqueleto-a: #f1e3e6;
  --c-esqueleto-b: #f8eef0;
  --c-ilus: var(--rosa);             /* cor de traço das ilustrações (rosa antigo) */
  --c-contador-fundo: var(--terracota); /* fundo do contador (rosa antigo forte, letra branca) */
  --c-sobre-destaque: #ffffff;       /* letra sobre o contador */
  --c-aviso-fundo: #3f5e45;          /* aviso "Salvo · Desfazer": verde, sem preto */
  --c-aviso-texto: #ffffff;
  --c-aviso-acao: #ffffff;
  --c-menu-ativo: #3f5e45;           /* item ativo do menu: verde cheio, letra branca */
  --c-menu-ativo-texto: #ffffff;

  /* ---------- Espaçamento: grade de 4 px ---------- */
  --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-12: 48px;
  --e-16: 64px;

  /* ---------- Raios ---------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pilula: 999px;

  /* ---------- Sombras (quase invisíveis) ---------- */
  --sombra-1: 0 1px 2px rgba(35, 28, 32, 0.05);
  --sombra-2: 0 2px 10px rgba(35, 28, 32, 0.06);
  --sombra-3: 0 16px 48px rgba(35, 28, 32, 0.18);

  /* ---------- Tipos de letra ---------- */
  --fonte-titulo: "Fraunces", "Iowan Old Style", Georgia, serif;
  --fonte-texto: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-13: 0.8125rem;
  --t-14: 0.875rem;
  --t-15: 0.9375rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-20: 1.25rem;
  --t-24: 1.5rem;
  --t-28: 1.75rem;
  --t-34: 2.125rem;

  /* ---------- Medidas de interface ---------- */
  --toque: 44px;
  --menu-largura: 256px;
  --menu-recolhido: 76px;
  --criar-tamanho: 56px; /* botão redondo "+" do celular */
  --topo-altura: 72px;
  --seguro-topo: env(safe-area-inset-top, 0px);
  --seguro-baixo: env(safe-area-inset-bottom, 0px);
  --seguro-esq: env(safe-area-inset-left, 0px);
  --seguro-dir: env(safe-area-inset-right, 0px);

  /* ---------- Camadas ---------- */
  --z-topo: 20;
  --z-flutuante: 30;
  --z-veu: 40;
  --z-menu: 50;
  --z-busca: 55;
  --z-janela: 60;
  --z-aviso: 80;

  /* ---------- Movimento ---------- */
  --dur-curta: 150ms;
  --dur-media: 200ms;
  --curva: cubic-bezier(0.3, 0.7, 0.2, 1);
}

/* ---------- Escuro: tema escolhido ---------- */
:root[data-tema="escuro"] {
  --papel: #171215;
  --painel: #221b1f;
  --faixa: #2d2429;
  --tinta: #f2eaed;
  --tinta-suave: #d7cdd1;
  --linha: #3d3237;
  --salvia: #3f5e45;
  --salvia-escura: #3f5e45;
  --rosa: #d9909a;

  --c-borda-campo: #95888e;
  --c-marca: #3f5e45;
  --c-marca-forte: #4a6b51;
  --c-sobre-marca: #ffffff;
  --c-marca-texto: var(--tinta);
  --c-marca-suave: #2a3b2e;
  --c-marca-suave-borda: #4d6b53;
  --c-destaque: var(--rosa);
  --c-destaque-texto: var(--tinta);
  --c-destaque-suave: #3a262c;
  --c-destaque-suave-borda: #7a4a53;
  --c-foco: #8cc8e0;
  --c-veu: rgba(10, 6, 8, 0.62);
  --c-hover: rgba(255, 255, 255, 0.06);
  --c-esqueleto-a: #2d2429;
  --c-esqueleto-b: #352b30;
  --c-ilus: var(--rosa);
  --c-contador-fundo: #9a4652;
  --c-sobre-destaque: #ffffff;
  --c-aviso-fundo: #3f5e45;
  --c-aviso-texto: #ffffff;
  --c-aviso-acao: #ffffff;
  --c-menu-ativo: #3f5e45;
  --c-menu-ativo-texto: #ffffff;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sombra-2: 0 2px 10px rgba(0, 0, 0, 0.3);
  --sombra-3: 0 16px 48px rgba(0, 0, 0, 0.55);
}

/* ---------- Escuro: automático pelo aparelho (quando não há escolha de tema) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):not([data-tema="escuro"]) {
    --papel: #171215;
    --painel: #221b1f;
    --faixa: #2d2429;
    --tinta: #f2eaed;
    --tinta-suave: #d7cdd1;
    --linha: #3d3237;
    --salvia: #3f5e45;
    --salvia-escura: #3f5e45;
    --rosa: #d9909a;

    --c-borda-campo: #95888e;
    --c-marca: #3f5e45;
    --c-marca-forte: #4a6b51;
    --c-sobre-marca: #ffffff;
    --c-marca-texto: var(--tinta);
    --c-marca-suave: #2a3b2e;
    --c-marca-suave-borda: #4d6b53;
    --c-destaque: var(--rosa);
    --c-destaque-texto: var(--tinta);
    --c-destaque-suave: #3a262c;
    --c-destaque-suave-borda: #7a4a53;
    --c-foco: #8cc8e0;
    --c-veu: rgba(10, 6, 8, 0.62);
    --c-hover: rgba(255, 255, 255, 0.06);
    --c-esqueleto-a: #2d2429;
    --c-esqueleto-b: #352b30;
    --c-ilus: var(--rosa);
    --c-contador-fundo: #9a4652;
    --c-sobre-destaque: #ffffff;
    --c-aviso-fundo: #3f5e45;
    --c-aviso-texto: #ffffff;
    --c-aviso-acao: #ffffff;
    --c-menu-ativo: #3f5e45;
    --c-menu-ativo-texto: #ffffff;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --sombra-2: 0 2px 10px rgba(0, 0, 0, 0.3);
    --sombra-3: 0 16px 48px rgba(0, 0, 0, 0.55);
  }
}

:root[data-tema="claro"] {
  color-scheme: light;
}
:root[data-tema="escuro"] {
  color-scheme: dark;
}