/* ==========================================================================
   NodeAI - Variáveis de Design Tokens (CSS Custom Properties)
   Diretriz Visual: Editorial Showroom • Precisão Arquitetural • Flat Luxury
   Referência: DESIGN.md • Paleta Original NodeAI Preservada
   ========================================================================== */

:root {
  /* ==========================================
     Tokens Oficiais DESIGN.md (Mapeados para a Paleta Original NodeAI)
     ========================================== */
  --color-vault-ink: #080a11;       /* Fundo principal Obsidian / Slate Profundo */
  --color-paper-white: #ffffff;     /* Branco puro para contrastes editoriais */
  --color-mist-white: #0d121f;      /* Superfície de cartões e consoles técnicos */
  --color-fog-gray: #94a3b8;        /* Cinza ardósia para subtítulos e descrições */
  --color-hairline: rgba(255, 255, 255, 0.08); /* Divisores e bordas milimétricas */
  --color-obsidian: #080a11;        /* Preto ardósia corporativo */
  --color-peach-wall: rgba(255, 255, 255, 0.03); /* Painel técnico sutil */
  --color-mint-wall: rgba(16, 185, 129, 0.06);   /* Painel de telemetria esmeralda */
  --color-lavender-wall: rgba(59, 130, 246, 0.06);/* Painel de destaque cobalto */
  --color-deep-teal: #10b981;       /* Acento esmeralda de telemetria ativa */
  --color-electric-violet: #3b82f6; /* Acento primário Azul Cobalto Enterprise */
  --color-royal-violet: #1d4ed8;    /* Acento profundo para foco/bordas ativas */
  --color-sapphire-blue: #2563eb;   /* Estado de hover do botão primário */

  /* WhatsApp Oficial */
  --color-whatsapp: #25d366;
  --color-whatsapp-hover: #20ba59;

  /* ==========================================
     Aliases Semânticos de Compatibilidade do Projeto
     ========================================== */
  --bg-base: var(--color-vault-ink);
  --bg-surface: var(--color-mist-white);
  --bg-surface-elevated: #131a2b;
  --bg-card: var(--color-mist-white);
  --bg-card-elevated: #131a2b;

  --border-subtle: var(--color-hairline);
  --border-medium: rgba(255, 255, 255, 0.14);
  --border-active: rgba(59, 130, 246, 0.45);
  --border-emerald: rgba(16, 185, 129, 0.35);

  --brand-blue: var(--color-electric-violet);
  --brand-blue-hover: var(--color-sapphire-blue);
  --brand-blue-light: #60a5fa;
  --brand-blue-subtle: rgba(59, 130, 246, 0.08);

  --status-emerald: var(--color-deep-teal);
  --status-emerald-bg: rgba(16, 185, 129, 0.08);
  --status-amber: #f59e0b;
  --status-amber-bg: rgba(245, 158, 11, 0.08);
  --status-red: #ef4444;
  --status-red-bg: rgba(239, 68, 68, 0.08);

  --whatsapp: var(--color-whatsapp);
  --whatsapp-hover: var(--color-whatsapp-hover);

  /* ==========================================
     Tipografia: Split Serif / Grotesk (DESIGN.md)
     ========================================== */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --font-neufile-grotesk-extended: var(--font-body);
  --font-albra-sans: var(--font-display);

  /* Escala de Tipografia */
  --text-caption: 13px;
  --leading-caption: 1.4;
  --text-body: 16px;
  --leading-body: 1.6;
  --text-subheading: 22px;
  --leading-subheading: 1.25;
  --text-heading-sm: 28px;
  --leading-heading-sm: 1.3;
  --text-heading: 46px;
  --leading-heading: 1.2;
  --tracking-heading: 0.02em;
  --text-display: 80px;
  --leading-display: 1.14;
  --tracking-display: 0.02em;

  /* Pesos */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Cores de Texto */
  --text-primary: #f8fafc;
  --text-secondary: var(--color-fog-gray);
  --text-muted: #64748b;
  --text-inverse: #080a11;

  /* ==========================================
     Geometria Arquitetural (2px botões, 0px cards)
     ========================================== */
  --radius-sm: 2px;
  --radius-btn: 2px;
  --radius-tag: 2px;
  --radius-input: 2px;
  --radius-card: 0px;
  --radius-cards: 0px;
  --radius-buttons: 2px;
  --radius-tags: 2px;

  /* Padding Confiante de Ação */
  --btn-padding-y: 12px;
  --btn-padding-x: 27px;

  /* Layout & Espaçamento */
  --page-max-width: 1200px;
  --section-gap: 96px;
  --card-padding: 32px;
  --element-gap: 16px;

  /* Flat Luxury: Zero sombras decorativas */
  --shadow-none: none;

  /* Transições */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
}