/* ============================================
   DESIGN TOKENS — Digital Detox
   ============================================
   FONTE ÚNICA de todos os valores de design compartilhados por
   site público, painel admin e página /design-system.

   Regra: cores, fontes, raios e afins vivem AQUI. Os arquivos
   style.css (site) e admin.css (painel) só consomem estas
   variáveis — nunca definem hex próprios para conceitos que já
   existem aqui. Mudou um valor neste arquivo, muda em todo lugar.
*/
:root {
  /* ---------- IDENTIDADE (compartilhada) ---------- */
  --accent: #8a85bf;        /* lilás da marca: destaques, links, CTAs */
  --dark: #1a1a1a;          /* escuro da marca: textos fortes, botão primário */
  --black: #111111;         /* contraste máximo */
  --white: #ffffff;         /* superfícies e cards */
  --off-white: #f4f4f8;     /* fundo claro do site (frio, afinado com o lilás) */
  --soft-bg: #ebeaf2;       /* fundo suave alternativo */
  --whatsapp: #25D366;      /* somente em elementos de WhatsApp */

  /* ---------- NEUTROS (escala do site) ---------- */
  --gray-800: #333333;      /* hover de botão escuro */
  --gray-600: #555555;      /* texto secundário (site) */
  --gray-400: #888888;      /* texto de apoio */
  --gray-200: #d4d4d4;      /* divisores claros */
  --gray-100: #eeeeee;      /* fundos sutis */

  /* ---------- TIPOGRAFIA ---------- */
  --font-display: "lust", serif;      /* títulos */
  --font-body: "poppins", sans-serif; /* texto e interface */

  /* ---------- ESCALA TIPOGRÁFICA (15 passos) ----------
     TODO font-size aponta para um destes tokens. Nada de tamanho solto.
     Display = títulos editoriais (Lust); os demais = texto/interface (Poppins). */
  --fs-display-xl: 6rem;    /* hero da home */
  --fs-display-lg: 4.2rem;  /* hero em tablet */
  --fs-display-md: 3.2rem;  /* títulos de seção (heading-lg) */
  --fs-display-sm: 2.4rem;  /* títulos em mobile */
  --fs-display-xs: 2rem;    /* títulos menores / CTA mobile */
  --fs-xxl: 1.8rem;         /* números de destaque (resumo, preço) */
  --fs-xl: 1.5rem;          /* logo, subtítulos grandes */
  --fs-lg: 1.3rem;          /* títulos de card */
  --fs-md: 1.1rem;          /* texto de destaque/lead */
  --fs-base: 1rem;          /* corpo */
  --fs-ui: 0.95rem;         /* botões do site, navegação */
  --fs-sm: 0.88rem;         /* campos, texto de apoio */
  --fs-xs: 0.8rem;          /* legendas, dicas, metadados */
  --fs-caption: 0.72rem;    /* etiquetas, cabeçalhos de tabela */
  --fs-micro: 0.65rem;      /* selos mínimos (badge do card de data) */

  /* ---------- PESOS (5) ---------- */
  --weight-light: 300;      /* corpo do site (leve/editorial) */
  --weight-regular: 400;    /* texto padrão */
  --weight-medium: 500;     /* botões, nomes, destaques suaves */
  --weight-semibold: 600;   /* títulos de UI, ênfase */
  --weight-extrabold: 800;  /* valores em destaque (preços) */

  /* ---------- ENTRELINHAS (5 passos) ---------- */
  --leading-none: 1;        /* títulos display, botões */
  --leading-tight: 1.15;    /* títulos grandes */
  --leading-ui: 1.2;        /* campos e controles (centralização da Poppins) */
  --leading-normal: 1.5;    /* texto de interface */
  --leading-relaxed: 1.7;   /* parágrafos de leitura */

  /* ---------- ESPAÇAMENTO DE LETRAS (5 tokens) ---------- */
  --track-none: 0;
  --track-btn: 0.5px;       /* botões e navegação */
  --track-caps: 1px;        /* rótulos maiúsculos do painel (labels, th) */
  --track-caps-wide: 2px;   /* rótulos maiúsculos do site */
  --track-eyebrow: 2.5px;   /* a tag da marca ("VIVÊNCIA") */

  /* ---------- LAYOUT DO SITE ---------- */
  --header-h: 80px;
  --radius: 16px;           /* cantos do site (cards grandes) */
  --radius-sm: 10px;        /* cantos menores do site */

  /* ---------- SEMÂNTICAS (status e avisos) ---------- */
  --green: #1e7e4f;  --green-bg: #e6f4ec;   /* pago, cortesia, sucesso */
  --amber: #9a6700;  --amber-bg: #fff4d6;   /* pendente, não compareceu, atenção */
  --red: #b42318;    --red-bg: #fdecea;     /* cancelado, erro */
  --purple: #655fa3; --purple-bg: #ecebf5;  /* voluntário (tom fechado do lilás da marca) */
  --tag-gray: #6b7280; --tag-gray-bg: #eef0f2; /* etiquetas neutras (tipo/pagamento) */

  /* ---------- PAINEL ADMIN ----------
     Nomes --a-* preservados por compatibilidade; onde o conceito é o
     mesmo da identidade, o valor REFERENCIA o token compartilhado. */
  --a-bg: #f4f5f7;              /* fundo do dashboard */
  --a-surface: var(--white);    /* superfícies/cards do painel */
  --a-border: #e3e6ea;          /* bordas de campos e cards */
  --a-text: #1a1d21;            /* texto principal do painel */
  --a-muted: var(--tag-gray);   /* texto de apoio, placeholders */
  --a-accent: var(--accent);
  --a-dark: var(--dark);
  --a-green: var(--green);   --a-green-bg: var(--green-bg);
  --a-amber: var(--amber);   --a-amber-bg: var(--amber-bg);
  --a-red: var(--red);       --a-red-bg: var(--red-bg);
  --a-purple: var(--purple); --a-purple-bg: var(--purple-bg);
  --a-radius: 12px;             /* cantos do painel (densidade maior) */
  --a-radius-sm: 8px;

  /* ---------- BOTÕES (painel) ----------
     Dimensões únicas para TODOS os botões de mesmo nível ficarem idênticos
     em altura e fonte (primário, contorno e discreto). */
  --btn-pad-y: 12px;
  --btn-pad-x: 20px;
  --btn-font: var(--fs-sm);
  /* Botões pequenos de linha/tabela (.act) */
  --btn-sm-pad-y: 7px;
  --btn-sm-pad-x: 10px;
  --btn-sm-font: var(--fs-xs);

  /* ---------- BOTÕES (site, formato pílula) ----------
     Todas as pílulas grandes (hero, CTA final, enviar inscrição, WhatsApp)
     compartilham o mesmo tamanho; o header usa a variante menor. */
  --btn-site-pad-y: 16px;
  --btn-site-pad-x: 36px;
  --btn-site-font: var(--fs-ui);
  --btn-site-radius: 50px;
  --btn-site-sm-pad-y: 12px;
  --btn-site-sm-pad-x: 28px;
  --btn-site-sm-font: var(--fs-sm);

  /* ---------- SOMBRAS (3 níveis + 2 especiais) ---------- */
  --shadow-sm: 0 4px 24px rgba(0, 0, 0, 0.05);   /* cards em repouso */
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.1);   /* hover/flutuantes leves */
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.25);  /* modais/destaque forte */
  --shadow-btn: 0 8px 24px rgba(0, 0, 0, 0.2);   /* hover de botões-pílula */
  --focus-ring: 0 0 0 3px rgba(138, 133, 191, 0.18); /* foco de campos (derivado do accent) */

  /* ---------- TRANSIÇÕES (2 durações) ---------- */
  --dur-fast: 0.2s;   /* micro-interações: hover de botão, cor */
  --dur-base: 0.3s;   /* movimentos maiores: transform, fundo de seção */

  /* ---------- CAMPOS DE FORMULÁRIO ---------- */
  /* Painel (denso) */
  --field-pad-y: 9px;
  --field-pad-x: 12px;
  --field-font: var(--fs-sm);
  /* Site (formulário público, mais confortável) */
  --field-site-pad-y: 14px;
  --field-site-pad-x: 16px;
  --field-site-font: var(--fs-base);

  /* ---------- ETIQUETAS (badges) ---------- */
  --badge-pad-y: 3px;
  --badge-pad-x: 10px;
  --badge-font: var(--fs-caption);

  /* ---------- COMPLEMENTOS DE COR ----------
     Hovers e variações que antes eram hex soltos nos CSS. */
  --whatsapp-dark: #1da851;   /* hover de elementos WhatsApp */
  --hover-row: #fafbfc;       /* hover de linha de tabela */
  --hover-soft: #f3f4f6;      /* hover suave (dias do calendário etc.) */
}