/* ============================================================
   GRAFOLOGIA BRASIL — DESIGN TOKENS  ·  v2 "Manuscrito"
   Escola de Formação
   Conceito: tinta sobre papel quente. Indigo = tinta dominante,
   amarelo = marca-texto, verde = CTA, azul = links. Paleta da
   bandeira recomposta com hierarquia editorial.
   Fonte da verdade. Importe ANTES de qualquer outro CSS.
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     1. TINTA & PAPEL  (neutros quentes — a base do conceito)
     ---------------------------------------------------------- */
  --paper:        #FAF6EC;   /* ◆ fundo da página — papel creme quente */
  --paper-raised: #FFFDF7;   /* superfícies elevadas (cards) */
  --paper-deep:   #F1EADB;   /* seções alternadas / sépia leve */
  --paper-edge:   #E6DCC6;   /* bordas sobre papel */

  --ink-900: #16151F;   /* tinta cheia — títulos fortes */
  --ink-800: #211F2E;
  --ink-700: #322F45;   /* texto padrão */
  --ink-600: #4A475F;
  --ink-500: #6B6880;   /* texto secundário */
  --ink-400: #918EA6;   /* placeholder */
  --ink-300: #BDB8C9;   /* divisores sutis */

  /* linhas de papel pautado (indigo bem diluído) */
  --rule:       rgba(62, 64, 149, 0.10);
  --rule-strong:rgba(62, 64, 149, 0.18);
  --margin-line: rgba(216, 57, 43, 0.35); /* margem vermelha do caderno */

  /* ----------------------------------------------------------
     2. CORES DE MARCA  (bandeira — extraídas das peças oficiais)
     ---------------------------------------------------------- */

  /* Indigo — a TINTA. Cor dominante, títulos e fundos profundos. */
  --indigo-50:  #ECEDF7;
  --indigo-100: #D6D7EE;
  --indigo-200: #AEB0DC;
  --indigo-300: #8385C5;
  --indigo-400: #5A5CAE;
  --indigo-500: #3E4095;  /* ◆ base — títulos das artes */
  --indigo-600: #313277;
  --indigo-700: #26275C;  /* tinta profunda — fundos invertidos */
  --indigo-900: #15163A;

  /* Azul — primária funcional (links, info, ações secundárias) */
  --blue-50:  #E8F1FB;
  --blue-100: #C5DCF3;
  --blue-300: #5697D8;
  --blue-500: #1660AB;   /* ◆ base — azul do logo */
  --blue-600: #12538F;
  --blue-700: #0F4474;

  /* Verde — CTA (espelha os botões reais "Aprenda na prática") */
  --green-50:  #E3F7EE;
  --green-100: #B9EAD3;
  --green-300: #3FC288;
  --green-500: #00A859;  /* ◆ base — verde do logo */
  --green-600: #048a4c;
  --green-700: #066b3d;

  /* Amarelo — o MARCA-TEXTO. Acento único e afiado. */
  --yellow-50:  #FFFBE6;
  --yellow-200: #FFEE9E;
  --yellow-400: #FFE04A;
  --yellow-500: #FEDA22;  /* ◆ base — amarelo do logo */
  --yellow-600: #E8C200;

  /* ----------------------------------------------------------
     3. PAPÉIS SEMÂNTICOS
     ---------------------------------------------------------- */
  --color-bg:          var(--paper);
  --color-bg-raised:   var(--paper-raised);
  --color-bg-alt:      var(--paper-deep);
  --color-bg-invert:   var(--indigo-700);

  --color-heading:     var(--indigo-700);
  --color-text:        var(--ink-700);
  --color-text-muted:  var(--ink-500);
  --color-text-onDark:    rgba(250, 246, 236, 0.94);
  --color-text-onDarkMut: rgba(250, 246, 236, 0.64);

  --color-primary:       var(--blue-500);   /* links / ações */
  --color-primary-hover: var(--blue-600);
  --color-cta:           var(--green-500);  /* botão principal */
  --color-cta-hover:     var(--green-600);
  --color-accent:        var(--indigo-500);
  --color-marker:        var(--yellow-500); /* realce */

  --color-border:        var(--paper-edge);
  --color-border-strong: var(--ink-300);

  --color-success: var(--green-600);
  --color-warning: #C98A00;
  --color-error:   #C9352A;
  --color-info:    var(--blue-500);

  /* ----------------------------------------------------------
     4. GRADIENTES & TEXTURAS
     ---------------------------------------------------------- */
  --grad-ink:    linear-gradient(155deg, var(--indigo-600) 0%, var(--indigo-900) 100%);
  --grad-brasil: linear-gradient(110deg, var(--green-500) 0%, var(--blue-500) 50%, var(--indigo-500) 100%);
  --grad-cta:    linear-gradient(150deg, var(--green-300) 0%, var(--green-600) 100%);
  --grad-marker: linear-gradient(180deg, transparent 58%, var(--yellow-400) 58%, var(--yellow-500) 92%, transparent 92%);

  /* grão de papel — ruído fino sobreposto (SVG fractalNoise) */
  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");

  /* papel pautado — linhas horizontais finas */
  --tex-ruled: repeating-linear-gradient(to bottom, transparent 0, transparent 33px, var(--rule) 33px, var(--rule) 34px);

  /* sublinhado desenhado à mão (traço de caneta) — verde */
  --stroke-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='24' viewBox='0 0 300 24' fill='none'%3E%3Cpath d='M4 14C60 7 120 6 180 9c40 2 80 5 116 2' stroke='%2300A859' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  /* sublinhado amarelo (marca-texto) */
  --stroke-underline-y: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='24' viewBox='0 0 300 24' fill='none'%3E%3Cpath d='M5 13c70 8 150 8 220 4 25-1 50-3 70-6' stroke='%23FEDA22' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");

  /* ----------------------------------------------------------
     5. TIPOGRAFIA
     Display: Fraunces  — serif editorial/manuscrito, com caráter
     Texto:   Hanken Grotesk — grotesca limpa (não-Inter)
     Mão:     Caveat — escrita à mão real (tema: grafologia)
     ---------------------------------------------------------- */
  --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --font-body:    'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-hand:    'Caveat', 'Segoe Script', cursive;

  /* eixos variáveis do Fraunces (caráter "wonky/soft" sutil) */
  --fraunces-soft: "SOFT" 30, "WONK" 1, "opsz" 120;

  /* escala fluida (clamp) */
  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1.0625rem;            /* 17px — leitura confortável */
  --fs-lg:   1.1875rem;
  --fs-xl:   clamp(1.25rem, 1.6vw, 1.4rem);
  --fs-2xl:  clamp(1.5rem, 2.2vw, 1.85rem);
  --fs-3xl:  clamp(1.9rem, 3vw, 2.4rem);
  --fs-4xl:  clamp(2.4rem, 4.4vw, 3.4rem);
  --fs-5xl:  clamp(3rem, 6vw, 4.6rem);
  --fs-6xl:  clamp(3.6rem, 8vw, 6rem);

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.62;
  --lh-relaxed: 1.78;

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.06em;
  --ls-caps:   0.16em;

  /* ----------------------------------------------------------
     6. ESPAÇAMENTO  (base 4px)
     ---------------------------------------------------------- */
  --sp-1:0.25rem; --sp-2:0.5rem; --sp-3:0.75rem; --sp-4:1rem;
  --sp-5:1.5rem;  --sp-6:2rem;   --sp-7:3rem;    --sp-8:4rem;
  --sp-9:6rem;    --sp-10:8rem;

  /* ----------------------------------------------------------
     7. RAIO  (papel = cantos mais retos; editorial, não "bubbly")
     ---------------------------------------------------------- */
  --r-sm:  3px;
  --r-md:  6px;
  --r-lg:  10px;
  --r-xl:  16px;
  --r-pill:999px;

  /* ----------------------------------------------------------
     8. ELEVAÇÃO  (sombras quentes de tinta — não azul-frio)
     ---------------------------------------------------------- */
  --sh-xs: 0 1px 2px rgba(22, 21, 31, 0.06);
  --sh-sm: 0 2px 10px rgba(22, 21, 31, 0.07);
  --sh-md: 0 10px 30px rgba(22, 21, 31, 0.10);
  --sh-lg: 0 22px 50px rgba(22, 21, 31, 0.14);
  --sh-xl: 0 34px 70px rgba(22, 21, 31, 0.18);
  --sh-cta:0 12px 26px rgba(0, 168, 89, 0.30);
  /* sombra "papel pousado" — dupla, levemente deslocada */
  --sh-paper: 2px 3px 0 var(--paper-edge), 0 14px 34px rgba(22,21,31,0.10);

  /* ----------------------------------------------------------
     9. LAYOUT & MOVIMENTO
     ---------------------------------------------------------- */
  --container:    1180px;
  --container-sm: 760px;
  --gutter:       clamp(1.1rem, 4vw, 2.2rem);

  --t-fast: 160ms cubic-bezier(0.22, 1, 0.36, 1);
  --t-base: 280ms cubic-bezier(0.22, 1, 0.36, 1);
  --t-slow: 600ms cubic-bezier(0.22, 1, 0.36, 1);

  --z-header: 100; --z-overlay: 500; --z-modal: 1000;
}

/* Respeito a quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}