/* ============================================================
   WeCoding — Design Tokens
   Fonte: WeCoding-Brandbook v1.0 · §10
   ============================================================ */

:root {
  /* marca */
  --wc-blue-700: #1B47B8;
  --wc-blue-600: #2563F5;
  --wc-blue-500: #3B82F6;
  --wc-cyan-400: #22D3EE;
  --wc-violet-500: #7C5CFF;

  /* neutros */
  --wc-ink-950: #0A0C10;
  --wc-ink-900: #111520;
  --wc-ink-800: #1A2030;
  --wc-ink-600: #3A4256;
  --wc-ink-400: #7A8399;
  --wc-ink-200: #C8CEDA;
  --wc-ink-100: #E6EAF2;
  --wc-ink-050: #F7F9FC;
  --wc-white: #FFFFFF;

  /* estado */
  --wc-success: #10B981;
  --wc-warning: #F59E0B;
  --wc-error: #F43F5E;

  /* tipografia */
  --wc-font-display: 'Satoshi', 'Inter', system-ui, sans-serif;
  --wc-font-text: 'Inter', system-ui, sans-serif;
  --wc-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* escala tipográfica — base 16 · razão 1,25 */
  --wc-display-xl: clamp(2.75rem, 1.75rem + 3.2vw, 4.25rem);  /* 44–68px */
  --wc-display-l: clamp(2rem, 1.6rem + 1.6vw, 2.5rem);        /* 32–40px */
  --wc-heading-m: 1.5rem;                                      /* 24px */
  --wc-body-l: 1.1875rem;                                      /* 19px */
  --wc-body-m: 1rem;                                           /* 16px */
  --wc-body-s: 0.875rem;                                       /* 14px */
  --wc-label: 0.75rem;                                         /* 12px */
  --wc-code: 0.8125rem;                                        /* 13px */

  /* forma */
  --wc-radius-sm: 6px;
  --wc-radius-md: 11px;
  --wc-radius-lg: 14px;
  --wc-radius-pill: 999px;
  --wc-border: 1px;
  --wc-icon-stroke: 1.75px;

  /* espaçamento — grid de 8 */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px;  --sp-12: 48px; --sp-16: 64px;
  --sp-24: 96px; --sp-32: 128px;

  /* layout */
  --wc-content-max: 1120px;
  --wc-margin: 32px;

  /* gradiente autorizado (único): Blue 600 → Violet 500 a 120°, 6–10% */
  --wc-halo: linear-gradient(120deg, rgba(37, 99, 245, 0.10), rgba(124, 92, 255, 0.06));

  /* motion */
  --wc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wc-dur-fast: 180ms;
  --wc-dur: 320ms;
  --wc-dur-slow: 640ms;
}

@media (max-width: 767px) {
  :root { --wc-margin: 20px; }
}