/*
  ╔══════════════════════════════════════════════════════════════════════╗
  ║  DESIGN SYSTEM — MESCLA VPC / ARQUITETOS                           ║
  ║  tokens.css — CSS Custom Properties (:root)                         ║
  ║                                                                      ║
  ║  Síntese de:                                                         ║
  ║  • Priscila Zillo — priscilazillo.com.br/formacao-bastidores-digital ║
  ║  • Julia Pretti   — juliapretti.com.br/canvacombo                   ║
  ║                                                                      ║
  ║  Contexto de uso: landing page low-ticket Método VPC (R$97)         ║
  ║  para arquitetos. Conversão precisa + credibilidade editorial.       ║
  ╚══════════════════════════════════════════════════════════════════════╝
*/

/* ── FONTE LOCAL: Montserrat (arquivos extraídos de Julia Pretti) ── */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat-400i.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
  Playfair Display: Google Fonts CDN.
  Para modo offline (file://), baixe os .woff2 em https://fonts.google.com/specimen/Playfair+Display
  e coloque como assets/fonts/playfair-*.woff2 — sem isso a página cai para Georgia (serif fallback).
  Nota: Big Caslon FB da Priscila é Adobe Typekit (externo/sem licença redistribuível);
  substituído por Playfair Display, que tem caráter editorial e serifado equivalente.
*/

/* ── FONTE LOCAL: Fraunces (extraída de Julia Pretti — display subtitle) ── */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/fraunces-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── TOKENS GLOBAIS ── */
:root {

  /* ─── COR DE AÇÃO ───────────────────────────────────────────────────
   *  ORIGEM: Priscila Zillo (vendas2025.css, linha 9: --cor: #E27526)
   *  DECISÃO: O laranja da Priscila tem performance comprovada em
   *  conversão. O verde musgo da Julia (#718472) é sofisticado mas
   *  não carrega urgência para low-ticket. Laranja fica nos CTAs
   *  primários; musgo fica nos elementos editoriais (checklist, badges).
   * ───────────────────────────────────────────────────────────────────*/
  --color-action:        #E27526;
  --color-action-hover:  #FF941D;
  --color-action-glow:   rgba(226, 117, 38, 0.35);
  --color-action-deep:   rgba(107, 58, 21, 0.9);   /* glow interno da Priscila */

  /* ─── ACENTO EDITORIAL ──────────────────────────────────────────────
   *  ORIGEM: Julia Pretti (buttons.css: background #718472; hover #424242)
   *  DECISÃO: Acento secundário para checkmarks, badges, labels de seção.
   *  Tom "verde-floresta" adequado ao vocabulário de planta/projeto.
   * ───────────────────────────────────────────────────────────────────*/
  --color-moss:          #718472;
  --color-moss-hover:    #424242;

  /* ─── SUPERFÍCIES ESCURAS ───────────────────────────────────────────
   *  ORIGEM: Priscila Zillo (navies profundos — a dramaticidade dark)
   *  DECISÃO: Julia usa cinzas escuros (#242323, #1E1E1E, #171717) —
   *  sofisticados mas neutros. Os navies da Priscila criam profundidade
   *  visual que diferencia uma landing page de um portfólio.
   *  Hero e CTA bars ganham o navy mais profundo.
   * ───────────────────────────────────────────────────────────────────*/
  --dark-void:           #000206;   /* Priscila: main background */
  --dark-deep:           #030C1C;   /* Priscila: barraFlutuante */
  --dark-section:        #041025;   /* Priscila: seções intermediárias */
  --dark-mid:            #101118;   /* Priscila: topo hero */
  --dark-surface:        #1A1F2E;   /* derivado — cards em dark */

  /* ─── SUPERFÍCIES CLARAS ────────────────────────────────────────────
   *  ORIGEM: Julia Pretti (layout.css: #F1F1F1, #D8D8D8, #E4E4E4)
   *  DECISÃO: Os cinzas frios da Julia são mais apropriados para
   *  arquitetos do que o branco-papel #FCFCFC da Priscila. Remetem
   *  a papel vegetal, prancha de projeto.
   * ───────────────────────────────────────────────────────────────────*/
  --light-page:          #F1F1F1;   /* Julia: fundo de página */
  --light-zebra:         #D8D8D8;   /* Julia: seções alternadas */
  --light-footer:        #E4E4E4;   /* Julia: rodapé */
  --light-paper:         #F8F8F8;   /* Julia: cards em fundo claro */
  --light-border:        #C8C8C8;   /* derivado — bordas sobre claro */

  /* ─── COR DE TEXTO ──────────────────────────────────────────────────
   *  ORIGEM: Julia (#020202 primário) + Priscila (#565F6F muted)
   *  DECISÃO: O quase-preto #020202 da Julia é mais preciso do que
   *  o #333 genérico; o muted da Priscila complementa para corpo.
   * ───────────────────────────────────────────────────────────────────*/
  --text-primary:        #020202;
  --text-secondary:      #565F6F;
  --text-muted:          #8A8FA0;   /* derivado */
  --text-on-dark:        #F6F6F6;
  --text-on-dark-muted:  rgba(246, 246, 246, 0.65);
  --text-on-dark-faint:  rgba(246, 246, 246, 0.40);

  /* ─── TIPOGRAFIA ────────────────────────────────────────────────────
   *  ORIGEM: Playfair Display (Priscila, Google Fonts) +
   *          Montserrat (Julia, local woff2) +
   *          Fraunces (Julia, local woff2 — subtítulos display italic)
   *
   *  DECISÃO:
   *  • Display → Playfair Display: serifa elegante para títulos de seção
   *    em dark backgrounds (40-64px). Big Caslon FB da Priscila é Typekit
   *    e não tem licença redistribuível; Playfair tem caráter editorial
   *    equivalente e carrega bem em tamanhos grandes.
   *  • Subtitle italic → Fraunces italic: subheads de destaque (36-52px).
   *    Da Julia; o italic óptico cria contraste com Playfair upright.
   *  • Body/UI → Montserrat: limpeza profissional, pesos claros, arquivos
   *    locais disponíveis. Arquitetos leem documentos técnicos em
   *    sans-serif geométrica — Montserrat encaixa melhor que Poppins 300.
   *    Poppins continua disponível via Google Fonts se necessário.
   * ───────────────────────────────────────────────────────────────────*/
  --font-display:  'Playfair Display', Georgia, serif;
  --font-subtitle: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-body:     'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-ui:       'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* ─── ESCALA TIPOGRÁFICA ────────────────────────────────────────────
   *  ORIGEM: Priscila (40-64px display) + Julia (65px hero, 17-23px body)
   * ───────────────────────────────────────────────────────────────────*/
  --fs-hero:      64px;    /* Priscila: títulos display de impacto */
  --fs-display:   48px;    /* síntese */
  --fs-heading1:  40px;    /* Priscila: h2 seções (guarda da Julia: 40px) */
  --fs-heading2:  32px;
  --fs-heading3:  24px;
  --fs-body-lg:   20px;
  --fs-body:      18px;    /* Priscila body base */
  --fs-body-sm:   17px;    /* Julia body */
  --fs-ui:        15px;    /* Julia: botões */
  --fs-label:     13px;    /* Julia: labels uppercase */
  --fs-micro:     11px;    /* Julia: badges */

  --lh-display:   1.1;
  --lh-heading:   1.25;
  --lh-body:      1.55;
  --lh-ui:        1.4;

  --ls-display:   -0.03em;           /* Julia: tight letter-spacing */
  --ls-body:       0em;
  --ls-label:      0.15em;           /* Julia: uppercase labels */
  --ls-micro:      0.12em;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ─── WATERMARK DECORATIVO ──────────────────────────────────────────
   *  ORIGEM: Julia Pretti (hero-wm: font-size 171px, color #F5F5F5)
   *  DECISÃO: Adoptamos o conceito da Julia mas com Playfair Display
   *  italic e opacidade mínima — evoca blueprints/plantas arquitetônicas.
   * ───────────────────────────────────────────────────────────────────*/
  --fs-watermark:  160px;
  --color-wm-light: rgba(3, 12, 28, 0.04);    /* sobre fundo claro */
  --color-wm-dark:  rgba(246, 246, 246, 0.04); /* sobre fundo dark */

  /* ─── BORDER RADIUS ─────────────────────────────────────────────────
   *  ORIGEM: Priscila (200px pill) vs Julia (2px reto)
   *  DECISÃO:
   *  • CTA primário → pill 200px (Priscila): o pill é o elemento de
   *    conversão mais forte; mantemos o DNA da Priscila nos CTAs.
   *  • Inputs → pill 200px (Priscila): consistência com o formulário.
   *  • Cards → 4px (síntese): Julia diz 2px, Priscila usa 16-24px nos
   *    containers; 4px é o ponto de equilíbrio que não parece genérico
   *    mas também não é agressivamente reto.
   *  • Badges/tags → 2px (Julia): precisão editorial para labels.
   *  • Vídeo/mídia → 8px: leve arredondamento sem perder seriedade.
   * ───────────────────────────────────────────────────────────────────*/
  --radius-pill:   200px;
  --radius-card:   4px;
  --radius-badge:  2px;
  --radius-media:  8px;
  --radius-input:  200px;

  /* ─── SOMBRAS ───────────────────────────────────────────────────────
   *  ORIGEM: Priscila (box-shadow 0 4px 10px #00000029) +
   *          Julia (3px 3px 2px rgba(0,0,0,.12))
   *  DECISÃO:
   *  • CTA default → entre os dois; a Julia usa offset diagonal (mais
   *    sutil), Priscila usa drop direto. Síntese: offset + difuso.
   *  • CTA hover glow → Priscila adaptado (orange glow tamed de 66 para 35%)
   *  • Cards → Julia (mais contenida, adequada para ambiente arquitetônico)
   * ───────────────────────────────────────────────────────────────────*/
  --shadow-cta:      0 4px 12px rgba(0, 0, 0, 0.22), 1px 1px 4px rgba(0, 0, 0, 0.10);
  --shadow-cta-hover: 0 0 20px 6px var(--color-action-glow), 0 4px 12px rgba(0, 0, 0, 0.22);
  --shadow-card:     3px 3px 2px rgba(0, 0, 0, 0.12);
  --shadow-inset:    inset 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-modal:    0 24px 64px rgba(0, 0, 0, 0.40);

  /* ─── BORDAS ────────────────────────────────────────────────────────*/
  --border-light:   1px solid rgba(0, 0, 0, 0.10);
  --border-dark:    1px solid rgba(246, 246, 246, 0.10);   /* Julia: .08 → .10 */
  --border-action:  1px solid rgba(255, 255, 255, 0.40);   /* Priscila: outline CTA hover */

  /* ─── TRANSIÇÕES ────────────────────────────────────────────────────
   *  ORIGEM: Julia (0.2s ease) vs Priscila (0.5s ease)
   *  DECISÃO: 0.3s é o ponto de equilíbrio — rápido o suficiente para
   *  micro-interações (hover) mas com peso suficiente para CTAs de venda.
   *  Accordion e modais usam 0.45s (próximo à Priscila) por envolverem
   *  mais área de tela.
   * ───────────────────────────────────────────────────────────────────*/
  --transition:       all 0.3s ease;
  --transition-fast:  all 0.15s ease;
  --transition-slow:  all 0.45s ease;

  /* ─── ESPAÇAMENTO ───────────────────────────────────────────────────*/
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;

  /* ─── LAYOUT ────────────────────────────────────────────────────────*/
  --container-max:  1200px;
  --container-mid:  980px;
  --container-slim: 760px;
  --section-pad-v:  var(--space-20);
  --section-pad-h:  var(--space-6);

  /* ─── Z-INDEX ───────────────────────────────────────────────────────*/
  --z-modal:    9000;
  --z-sticky:   1000;
  --z-overlay:  500;
  --z-default:  1;
}