/* ==========================================================================
   Farmácias Aguiar · tokens de design · conceito "O traço do A"
   Fonte das cores de marca: medidas no PNG original (logo-aguiar-original.png)
   azul #2E348B (1.315 px) · amarelo #F7EA23 (201 px). Contrastes WCAG em
   PLANO/02_DIRECAO_VISUAL.md §2.3. Dono: direção visual.
   Google Fonts:
   https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@1,6..72,400;1,6..72,500&family=IBM+Plex+Mono:wght@500;600&display=swap
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Marca (exatas do logo, nunca alterar) ---- */
  --marca-azul:     #2E348B;
  --marca-amarelo:  #F7EA23;

  /* ---- Escala do azul ---- */
  --azul-950: #0E1030;   /* noite Aguiar: fundo escuro */
  --azul-900: #15173A;   /* tinta */
  --azul-800: #1B1F5C;   /* rodapé, faixa profunda */
  --azul-700: #252A73;   /* hover do botão azul */
  --azul-600: #2E348B;   /* = marca */
  --azul-400: #5A61B8;   /* ilustração, nunca texto pequeno no claro */
  --azul-300: #A9AEF0;   /* azul no escuro (texto e link) 8,8:1 sobre noite */
  --azul-100: #E4E5F3;   /* tinta de fundo, chip */
  --azul-50:  #F1F1F9;

  /* ---- Escala do amarelo (superfície e traço, nunca texto sobre claro) ---- */
  --amarelo-500: #F7EA23;  /* = marca */
  --amarelo-400: #FAF06B;  /* brilho, realce de traço */
  --amarelo-200: #FCF6B8;  /* marca-texto atrás de palavra */
  --amarelo-100: #FEFBE0;  /* faixa de aviso suave */
  --amarelo-texto: #7A6A00;/* quando o amarelo precisa virar texto no claro: 4,9:1 */

  /* ---- Neutros quentes (papel de farmácia, não branco hospitalar) ---- */
  --papel:      #F7F4EC;
  --papel-2:    #EFEAE0;
  --cartao:     #FFFDF8;
  --areia:      #D8D2C2;  /* linha forte, decorativo */
  --linha-q:    #E3DDCF;
  --grafite:    #3B3E58;
  --cinza-q:    #5B5E73;

  /* ---- Sub-identidade Manipulação (Aguiar Sob Medida) ---- */
  --floresta:   #1F4A37;  /* 9,1:1 sobre papel; branco sobre ela 10:1 */
  --folha:      #2F6E52;  /* link e destaque em texto 5,5:1 */
  --folha-clara:#86C3A4;  /* verde no escuro 9,1:1 sobre noite */
  --argila:     #A4532F;  /* número de etapa, itálico de ênfase 4,95:1 */
  --argila-viva:#C46A3F;  /* só forma (metade da cápsula) */
  --mel:        #D9A441;  /* grânulos, decorativo */
  --salvia:     #A9C2AF;  /* camadas, decorativo */
  --linho:      #F5EFE6;  /* fundo das seções da manipulação */

  /* ---- Estados ---- */
  --ok:     #1E7A4C;
  --alerta: #7A6A00;
  --erro:   #B3261E;  /* 5,95:1 sobre papel */
  --foco:   #2E348B;

  /* ---- PAPÉIS (use estes no CSS das páginas) ---- */
  --fundo:        var(--papel);
  --fundo-2:      var(--papel-2);
  --superficie:   var(--cartao);
  --tinta:        var(--azul-900);  /* títulos 15,7:1 */
  --corpo:        var(--grafite);   /* texto corrido 9,5:1 */
  --suave:        var(--cinza-q);   /* legenda, rótulo 5,8:1 */
  --linha:        var(--linha-q);
  --azul:         var(--marca-azul);   /* link, botão, título de destaque 9,65:1 */
  --azul-texto:   var(--marca-azul);
  --amarelo:      var(--marca-amarelo);
  --sobre-azul:   #FFFFFF;          /* 10,6:1 */
  --sobre-amarelo:var(--azul-900);  /* 13,8:1 */
  --acento-manip: var(--floresta);
  --acento-manip-2: var(--argila);
  --acento-manip-texto: var(--folha);

  /* ---- Tipografia ---- */
  --f-display: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  --f-texto:   "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-editorial: "Newsreader", Georgia, serif;   /* só itálico, só manipulação e citações */
  --f-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --t-mega:  clamp(3rem, 1.6rem + 6.4vw, 7.25rem);   /* H1 do hero */
  --t-h1:    clamp(2.5rem, 1.7rem + 3.6vw, 4.75rem);
  --t-h2:    clamp(1.875rem, 1.4rem + 2vw, 3.25rem);
  --t-h3:    clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --t-h4:    1.25rem;
  --t-lead:  clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --t-corpo: 1.0625rem;   /* 17 px */
  --t-peq:   0.9375rem;   /* 15 px */
  --t-rotulo:0.875rem;    /* 14 px: piso do site */

  --lh-titulo: 1.02;
  --lh-sub:    1.2;
  --lh-corpo:  1.6;
  --ls-titulo: -0.025em;
  --ls-mega:   -0.035em;
  --ls-rotulo: 0.08em;
  --medida:    62ch;

  /* ---- Espaço (base 4, escala 8) ---- */
  --e-1: 0.25rem;  --e-2: 0.5rem;  --e-3: 0.75rem; --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;    --e-7: 3rem;    --e-8: 4rem;
  --e-9: 6rem;     --e-10: 8rem;   --e-11: 12rem;
  --secao:  clamp(4.5rem, 3rem + 7vw, 10rem);   /* respiro vertical entre seções */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  /* ---- Grid ---- */
  --max:        1320px;
  --max-texto:  760px;
  --colunas:    12;
  --col-gap:    clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --header-h:   72px;

  /* ---- Raio (o quadrado do logo tem raio de 9,5 por cento do lado) ---- */
  --r-xs: 6px;   --r-sm: 10px;  --r-md: 16px;
  --r-lg: 24px;  --r-xl: 36px;  --r-pill: 999px;
  --r-marca: 9.5%; /* para tiles quadrados que ecoam o símbolo */

  /* ---- Sombra (tingida de azul, nunca preta) ---- */
  --s-1: 0 1px 2px rgba(21,23,58,.06), 0 1px 1px rgba(21,23,58,.04);
  --s-2: 0 4px 12px -2px rgba(21,23,58,.08), 0 2px 4px rgba(21,23,58,.04);
  --s-3: 0 18px 40px -12px rgba(21,23,58,.18), 0 4px 10px -4px rgba(21,23,58,.08);
  --s-4: 0 40px 80px -24px rgba(21,23,58,.28);
  --s-amarelo: 0 10px 30px -10px rgba(247,234,35,.55);
  --anel-foco: 0 0 0 3px var(--fundo), 0 0 0 5px var(--foco);

  /* ---- Traço (iconografia e ilustração) ---- */
  --traco-icone: 1.75px;  /* ícone 24 px */
  --traco-ilustra: 2.5px;
  --traco-a: 5.6;         /* espessura do traço do A no viewBox 56 */

  /* ---- Movimento (GSAP 3.13) ---- */
  --dur-1: 160ms; --dur-2: 280ms; --dur-3: 520ms; --dur-4: 900ms; --dur-traco: 1400ms;
  --ease-saida: cubic-bezier(.16,1,.3,1);      /* gsap: "expo.out" */
  --ease-padrao: cubic-bezier(.33,1,.68,1);    /* gsap: "power3.out" */
  --ease-entra-sai: cubic-bezier(.65,0,.35,1); /* gsap: "power3.inOut" */

  /* ---- Camadas ---- */
  --z-base: 1; --z-header: 50; --z-flutuante: 60; --z-modal: 100;
}

/* ---- Tema escuro opcional: "noite Aguiar" ---- */
[data-theme="dark"] {
  color-scheme: dark;
  --fundo:      var(--azul-950);
  --fundo-2:    #121540;
  --superficie: #171A45;
  --tinta:      #F3EFE6;  /* 16,1:1 */
  --corpo:      #C7C9DA;  /* 11,3:1 */
  --suave:      #9A9DB8;  /* 6,9:1 (6,2:1 sobre superfície) */
  --linha:      rgba(243,239,230,.14);
  --azul:       var(--azul-300);
  --azul-texto: var(--azul-300);
  --amarelo:    var(--marca-amarelo); /* 14,7:1 sobre noite: pode ser texto aqui */
  --sobre-azul: var(--azul-950);
  --acento-manip: var(--folha-clara);
  --acento-manip-2: #E79A72;
  --acento-manip-texto: var(--folha-clara);
  --foco: var(--marca-amarelo);
  --s-1: 0 1px 2px rgba(0,0,0,.4);
  --s-2: 0 6px 16px -4px rgba(0,0,0,.5);
  --s-3: 0 22px 48px -16px rgba(0,0,0,.6);
  --s-4: 0 40px 90px -24px rgba(0,0,0,.7);
}

/* ---- Sub-tema Manipulação: aplicar em <body data-area="manipulacao"> ou numa <section> ---- */
[data-area="manipulacao"] {
  --fundo:       var(--linho);
  --fundo-2:     #ECE4D7;
  --superficie:  #FFFDF9;
  --tinta:       #1C211D;
  --corpo:       #46504A;
  --suave:       #5F665F;
  --linha:       #E2D9CA;
  --acento-manip:var(--floresta);
  --foco:        var(--floresta);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --dur-traco: 0ms; }
}