/* ==========================================================================
   Design System — Captura Claude Code
   Tokens prontos pra copiar no :root de qualquer projeto.
   Pareia com fonts/*.woff2 e starter.css desta pasta.
   ========================================================================== */

:root {
  /* --- Tipografia --- */
  --font-display: 'Nofex', 'Costly', sans-serif;
  --font-body: 'JUST Sans', sans-serif;
  --font-mono: 'JetBrains Mono', 'Bergen Mono', 'Menlo', 'Consolas', monospace;

  /* --- Backgrounds --- */
  --color-bg: #ffffff;            /* fundo principal seções light */
  --color-bg-dark: #111214;       /* fundo hero, formulários */
  --color-surface: #f0f1f3;       /* cards, surface neutra fria */
  --color-bg-cream: #FAF7F2;      /* hero light alternativo */

  /* --- Texto --- */
  --color-text: #18181b;                          /* dark on light */
  --color-text-on-dark: #f1f2f5;                  /* light on dark */
  --color-text-muted: #4a4d54;                    /* secundário em fundo light */
  --color-text-muted-dark: rgba(230, 232, 238, 0.78); /* secundário em fundo dark */
  --color-text-cream: #1A1A2E;                    /* texto sobre cream */
  --color-text-cream-muted: #4A4A5E;              /* secundário sobre cream */

  /* --- Accent (única cor quente do sistema) --- */
  --color-primary: #e25e3e;        /* coral — CTA, links, ícones, destaque */
  --color-primary-hover: #c64f30;  /* hover do CTA */
  --color-primary-amber: #F39C12;  /* âmbar usado em blobs decorativos */

  /* --- Bordas --- */
  --color-border: #d4d6db;                          /* fundo light */
  --color-border-dark: rgba(255, 255, 255, 0.08);   /* fundo dark */
  --color-border-paper: #c9c3b8;                    /* dossiê de papel */

  /* --- Status --- */
  --color-error: #dc2626;
  --color-success: #16a34a;

  /* --- Cores do terminal (syntax highlighting) --- */
  --color-terminal-green: #4ade80;                  /* strings, checks, sucesso */
  --color-terminal-blue: #60a5fa;                   /* glitch accent */
  --color-terminal-white: #ffffff;                  /* comandos */
  --color-terminal-muted: rgba(255, 255, 255, 0.45); /* output */
  --color-terminal-dim: rgba(255, 255, 255, 0.25);   /* comentários */

  /* --- Cores do dossiê (papel envelhecido) --- */
  --color-paper: #f2efe8;
  --color-paper-ink: #1a1714;
  --color-paper-ink-muted: #8a8377;
  --color-stamp-red: rgba(200, 30, 30, 0.6);
  --color-stamp-red-faded: rgba(200, 30, 30, 0.25);

  /* --- macOS terminal dots --- */
  --color-mac-red: #ff5f57;
  --color-mac-yellow: #febc2e;
  --color-mac-green: #28c840;

  /* --- Brutal (WhatsApp flutuante e selos) --- */
  --color-brutal-bg: #FFFDF6;
  --color-brutal-ink: #0A0A0A;
  --color-whatsapp-green: #25D366;

  /* --- Espaçamento --- */
  --container-px: clamp(1.25rem, 5vw, 2rem);
  --container-max: 1100px;
  --section-py: clamp(5rem, 12vw, 9rem);
  --cards-gap: 0.75rem;
  --form-group-gap: 1.25rem;

  /* --- Radius --- */
  --radius-sm: 2px;     /* dossiê, etiquetas, slabs brutais */
  --radius-md: 6px;     /* botões, inputs, cards padrão */
  --radius-lg: 8px;     /* terminal, cards de imagem */
  --radius-xl: 12px;    /* modal */

  /* --- Sombras --- */
  --shadow-card: 0 12px 32px rgba(24, 24, 27, 0.1);
  --shadow-terminal: 0 40px 80px rgba(0, 0, 0, 0.5);
  --shadow-brutal: 6px 6px 0 var(--color-primary), 6px 6px 0 1px var(--color-brutal-ink);
  --shadow-glow-coral: 0 0 40px rgba(226, 94, 62, 0.15), 0 0 80px rgba(226, 94, 62, 0.08);

  /* --- Transições --- */
  --ease-out-quint: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.25s;
  --duration-slow: 0.5s;
}