/* ============================================================================
   tokens.css — Design tokens do webdesignteam.pt (tema "Editorial / bold").
   Base neutra + acento de marca, agora com pairing tipográfico (Hanken Grotesk
   + Newsreader itálico + JetBrains Mono), tinta quente e ambiente de gradiente.
   Os NOMES dos tokens mantêm-se (compatível com todo o CSS de componentes).
   ============================================================================ */
:root {
    /* ── Generator DS · Foundations (FONTE DE VERDADE — Figma) ──
       Mapeado de "Foundations | Generator Design System" (Figma).
       O site público herda estes VALORES de marca, com identidade própria
       (fontes auto-hospedadas, tinta quente do redesign). A fonte do DS é
       Sul Sans (licenciada/Worten) — NÃO usada aqui de propósito. */
    --gen-red:        #E51B15;  --gen-red-01:    #FBDDDD;  --gen-red-02:    #F6BCBB;  /* Brand/WortenRed (+01/02) */
    --gen-purple:     #995C85;  --gen-purple-01: #F0E7ED;  --gen-purple-02: #E0CEDA;  /* Brand/PurpleGen (+01/02) */
    /* Rampa neutra completa (Foundations → Colors) */
    --gen-neu-01:     #FBFBFB;  /* NeuGen01 */
    --gen-neu-02:     #EBEBEB;  /* NeuGen02 */
    --gen-neu-03:     #949494;  /* NeuGen03 */
    --gen-neu-04:     #666666;  /* NeuGen04 */
    --gen-black:      #363636;  /* BlackGen */
    --gen-white:      #FFFFFF;
    /* Estados-fonte do DS (distinto dos nossos semânticos abaixo) */
    --gen-success:    #19B404;  /* SuccessGreen */
    --gen-error:      #D13F00;  /* ErrorRed (≠ brand WortenRed) */
    /* Gradientes de marca (Foundations → Colors → Gradients): mauve↔red */
    --gen-grad-h:     linear-gradient( 90deg, #995C85 0%, #E51B15 100%);  /* Horizontal */
    --gen-grad-v:     linear-gradient(180deg, #995C85 0%, #E51B15 100%);  /* Vertical   */
    --gen-grad-a:     linear-gradient( 45deg, #995C85 0%, #E51B15 100%);  /* Angular    */

    /* ── Cor: base + tinta (alinhada ao Generator DS) ── */
    --wdt-bg:        var(--gen-neu-01);
    --wdt-surface:   var(--gen-white);
    --wdt-ink:       #26221F;            /* tinta quente do redesign (DS usa --gen-black #363636) */
    --wdt-ink-soft:  #555555;
    --wdt-ink-muted: #777777;
    --wdt-ink-faint: var(--gen-neu-03);  /* #949494 */
    --wdt-line:      var(--gen-purple-01); /* #F0E7ED — blush subtil */
    --wdt-line-2:    var(--gen-purple-02); /* #E0CEDA */

    /* ── Acento de marca (do Generator DS) ── */
    --wdt-accent:        var(--gen-purple);   /* mauve #995C85 */
    --wdt-accent-pink:   #E8A9C4;             /* rosa claro p/ escuros (do redesign) */
    --wdt-accent-strong: var(--gen-red);      /* vermelho #E51B15 */
    --wdt-surface-tint:  #F8EBF0;
    --wdt-gradient:      linear-gradient(90deg, #E51B15 0%, #995C85 100%);
    --wdt-gradient-pink: linear-gradient(90deg, rgba(229,27,21,.15) 0%, rgba(153,92,133,.15) 100%);

    /* Tints quentes (covers, painéis) */
    --wdt-pink-50:  #FCEFF2;
    --wdt-peach:    #FBE3DC;
    --wdt-mauve-50: #F3D9E4;

    /* Superfícies escuras (secções dark) */
    --wdt-dark:   #1C171F;
    --wdt-dark-2: #26221F;
    --wdt-plum:   #161019;

    /* ── Espaçamento ── */
    --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px; --sp-6: 72px; --sp-7: 112px;

    /* ── Raios ── */
    --r-sm: 4px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

    /* ── Sombras ── */
    --sh-sm: 0 1px 3px rgba(54,54,54,.06);
    --sh-md: 0 12px 34px rgba(153,92,133,.14);
    --sh-lg: 0 30px 70px rgba(153,92,133,.20);
    --sh-action-red:       0 14px 34px rgba(229,27,21,.26);
    --sh-action-red-hover: 0 20px 44px rgba(229,27,21,.34);
    --sh-action-mauve:     0 12px 30px rgba(153,92,133,.22);
    --focus-ring:       0 0 0 3px rgba(153,92,133,.35);
    --focus-glow-mauve: 0 0 0 3px rgba(153,92,133,.18);

    /* ── Estados ── */
    --wdt-success: #1FAE5A;  --wdt-tint-success: #EAF6EE;
    --wdt-warning: #FF6B35;  --wdt-tint-warning: #FFF1EA;
    --wdt-danger:  #E51B15;  --wdt-tint-danger:  #FDECEB;
    --wdt-tint-info:  #F3F3F4;

    /* ── Tipografia ── */
    --font:       'Hanken Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-serif: 'Newsreader', Georgia, "Times New Roman", serif;
    --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --t-display: clamp(46px, 8vw, 110px);
    --t-h1:      clamp(34px, 5.4vw, 72px);
    --t-h2:      clamp(28px, 3.4vw, 44px);
    --t-h3:      22px;
    --t-body:    16px;
    --t-small:   14px;
    --t-eyebrow: 12px;

    /* Layout */
    --maxw: 1080px;
    --maxw-wide: 1320px;
    --header-h: 70px;

    /* Movimento */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dur: 240ms;
}