/* ==========================================================================
   DESIGN SYSTEM — CSS Custom Properties (Variables)
   Template t09-mental-health · Instituto Multidisciplinar (tema claro)
   Identidade Inovar: roxo de marca, paleta arco-íris de apoio, verde no contato.
   Sem tema escuro (decisão de design validada com o cliente).

   Este é o ÚNICO arquivo de tokens. Cores, espaçamentos, tipografia, raios,
   sombras, z-index e durações moram aqui; os demais CSS referenciam as vars.
   ========================================================================== */

:root {

  /* ── Tipografia ─────────────────────────────────────────────────────── */
  --font-display: 'Nunito Sans', 'Trebuchet MS', system-ui, sans-serif;
  --font-body:    'Nunito Sans', 'Trebuchet MS', system-ui, sans-serif;
  --font-mono:    'Space Mono', monospace;

  /* Escala de tamanhos (fluid via clamp) */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  clamp(1.9rem, 3.4vw, 2.6rem);
  --text-5xl:  clamp(2.4rem, 5.2vw, 4.1rem);
  --text-6xl:  clamp(2.8rem, 6vw, 4.6rem);
  --text-hero: clamp(2.4rem, 5.2vw, 4.1rem);

  /* Tamanhos de apoio usados pelo tema (valores fora da escala base) */
  --text-node:    0.78rem;   /* rótulo dos nós do hero */
  --text-tag:     0.7rem;    /* pílulas de área no card da equipe */
  --text-meta:    0.72rem;   /* registro/observação do profissional */
  --text-person:  0.8rem;    /* função do profissional */
  --text-mini:    0.85rem;   /* textos de rodapé */
  --text-note:    0.88rem;   /* notas de formulário */
  --text-caption: 0.9rem;    /* legendas */
  --text-sub:     0.92rem;   /* subtítulos de card */
  --text-nav:     0.95rem;   /* navegação, contadores, corpo compacto */
  --text-chip:    0.98rem;   /* chips de filtro */
  --text-body:    1.0625rem; /* corpo do documento */
  --text-quote:   1.05rem;   /* citação de depoimento */
  --text-h4:      1.1rem;    /* h3 de bloco menor */
  --text-faq:     1.15rem;   /* pergunta do FAQ */
  --text-lead:    1.1875rem; /* linha de apoio (lead) */
  --text-h3:      1.3rem;    /* h3 padrão */
  --text-plus:    1.6rem;    /* sinal "+" do FAQ */
  --text-logo:    1.75rem;   /* marca no cabeçalho */
  --text-mark:    2.4rem;    /* aspas de depoimento */

  --weight-regular:  400;
  --weight-medium:   600;
  --weight-semibold: 700;
  --weight-bold:     800;
  --weight-black:    900;

  --leading-tight:   1.08;
  --leading-snug:    1.25;
  --leading-normal:  1.65;
  --leading-relaxed: 1.8;

  --tracking-tight:  -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.12em;

  /* ── Paleta de Cores ────────────────────────────────────────────────── */

  /* Tokens semânticos do tema claro (Inovar) */
  --bg:        #FBF8FC; /* Fundo principal */
  --surface:   #FFFFFF; /* Cards e superfícies */
  --white:     #FFFFFF; /* Branco puro (glows, contrastes) */
  --ink:       #1D1A2B; /* Texto principal */
  --ink-2:     #4F4A63; /* Texto secundário */
  --line:      #E3DCEE; /* Bordas e divisores */
  --primary:   #4B3596; /* Roxo de marca / ação */
  --on-primary:#FFFFFF;
  --wash:      #E9E1F6; /* Fundo do hero e seção Autismo */
  --wash2:     #FFF5DC; /* Fundo da seção Equipe */
  --contact:   #37277A; /* Roxo profundo do bloco de contato e do pay-card */
  --on-contact:#FFFFFF;

  /* Paleta de apoio (arco-íris do flyer) */
  --g: #3FA34D; --y: #F5C518; --o: #F28C28;
  --r: #E5484D; --p: #8E44AD; --b: #2F80ED;
  --rb: linear-gradient(135deg, var(--g), var(--y), var(--o), var(--r), var(--p), var(--b));

  /* Roxo (Base da Marca) */
  --color-primary:       var(--primary);
  --color-primary-light: #B9A2F5;
  --color-primary-dark:  #37277A;
  --color-primary-ghost: rgba(75, 53, 150, 0.08);

  /* Amarelo (Destaque da Marca) */
  --color-accent:        var(--y);
  --color-accent-light:  #F7D66B;
  --color-accent-dark:   #D9AE00;
  --color-accent-ghost:  rgba(245, 197, 24, 0.16);
  --color-accent-on:     var(--ink);

  /* Tons escuros neutros */
  --color-dark:          var(--contact);
  --color-dark-alt:      #2B1D63;

  /* Configuração de Telas e Fundos */
  --color-bg:            var(--bg);
  --color-bg-alt:        var(--wash);
  --color-border:        var(--line);
  --color-border-dark:   #CFC4E4;

  /* Tipografia e Textos */
  --color-text:          var(--ink);
  --color-text-muted:    var(--ink-2);
  --color-text-light:    var(--color-primary-light);
  --color-text-inverse:  #FFFFFF;
  --color-text-dark:     var(--ink);

  /* Apoios visuais */
  --color-teal-soft:     #E4F0EA;
  --color-lilac-soft:    var(--wash);
  --color-sun:           var(--y);
  --color-sun-soft:      var(--wash2);
  --color-whatsapp-deep: #1F9D55;

  /* Estados (mensagens de formulário) */
  --color-success:       #16A34A;
  --color-error:         #DC2626;
  --color-warning:       #D97706;
  --color-success-deep:  #1c5c28; /* texto de sucesso sobre wash verde */
  --color-error-deep:    #8f2226; /* texto de erro sobre wash vermelho */

  /* Sombras de elementos específicos do tema */
  --shadow-brain:        rgba(30, 20, 50, 0.18); /* halo do cérebro do hero */
  --shadow-whatsapp:     rgba(31, 157, 85, 0.45); /* flutuante do WhatsApp */
  --shadow-whatsapp-ring:rgba(31, 157, 85, 0.14); /* anel do pulso do WhatsApp */

  /* ── Espaçamentos ───────────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Espaçamentos de apoio (valores fora da escala base) */
  --space-2px:  2px;
  --space-3px:  3px;
  --space-6px:  6px;
  --space-10px: 10px;
  --space-14px: 14px;
  --space-18px: 18px;
  --space-22px: 22px;
  --space-26px: 26px;
  --space-28px: 28px;
  --space-44px: 44px;
  --space-72px: 72px;

  --section-gap: clamp(4rem, 8vw, 7rem);

  /* Geometria de componentes (tamanhos fixos recorrentes) */
  --size-node:     84px;  /* largura de cada nó do hero */
  --size-ring-lg:  64px;  /* anel padrão */
  --size-ring-md:  60px;  /* anel de bloco e avatar de passo */
  --size-ring-sm:  48px;  /* anel dos nós do hero */

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --container-max:  1120px;
  --container-pad:  clamp(20px, 4vw, 40px);

  /* ── Border Radius ──────────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 999px;
  --radius-btn:  999px;
  --radius-card: 24px;
  --radius-media:28px;
  /* Raio de apoio (valores fora da escala base) */
  --radius-14:   14px;
  --radius-18:   18px;
  --radius-20:   20px;
  --radius-48:   48px;

  /* ── Sombras ────────────────────────────────────────────────────────── */
  --shadow-sm:      0 1px 3px rgba(29,26,43,0.06), 0 1px 2px rgba(29,26,43,0.04);
  --shadow-md:      0 6px 18px rgba(29,26,43,0.08), 0 2px 6px rgba(29,26,43,0.04);
  --shadow-lg:      0 14px 40px rgba(29,26,43,0.10), 0 4px 12px rgba(29,26,43,0.05);
  --shadow-xl:      0 22px 60px rgba(29,26,43,0.12), 0 8px 20px rgba(29,26,43,0.06);
  --shadow-primary: 0 14px 34px rgba(75,53,150,0.22);
  --shadow-accent:  0 14px 34px rgba(245,197,24,0.24);

  /* ── Transições ─────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-250: 250ms;
  --duration-400: 400ms;

  --transition-fast:  150ms var(--ease-in-out);
  --transition-base:  250ms var(--ease-out);
  --transition-slow:  400ms var(--ease-out);

  /* ── Z-Index ────────────────────────────────────────────────────────── */
  --z-base:    1;
  --z-above:   10;
  --z-overlay: 100;
  --z-nav:     400;
  --z-float:   500;
  --z-modal:   600;
  --z-toast:   700;
}