/* ========================================
   ATALHO - DESIGN SYSTEM VARIABLES
   ÚNICA fonte de verdade para variáveis CSS
   ======================================== */

:root {
  /* === CORE PALETTE === */
  --bg-primary: #faf8f5;
  --bg-secondary: #f0ede8;
  --bg-dark: #1a1814;
  --bg-accent: #e8dfd0;

  /* === TEXT COLORS === */
  --text-primary: #1a1814;
  --text-secondary: #5c5650;
  --text-muted: #8a847c;
  --text-inverse: #faf8f5;

  /* === ACCENT COLORS === */
  --accent-primary: #c4a052;
  --accent-hover: #d4b062;
  --accent-dark: #9a7b3c;
  --accent-glow: rgba(196, 160, 82, 0.3);

  /* === FEATURE COLORS === */
  --feature-bolt: #e8a43a;
  --feature-database: #6b8e5a;
  --feature-format: #7b6ba0;
  --feature-office: #5a7b9a;

  /* === GRADIENTS === */
  --gradient-hero: linear-gradient(165deg, #faf8f5 0%, #f0ede8 40%, #e8dfd0 100%);
  --gradient-accent: linear-gradient(135deg, #c4a052 0%, #d4b062 50%, #e8c47a 100%);

  /* === TYPOGRAPHY === */
  --font-display: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* === SPACING === */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 8rem;

  /* === LAYOUT === */
  --header-height: 90px;
  --container-max: 1280px;
  --border-radius: 12px;
  --border-radius-sm: 6px;
  --border-radius-pill: 100px;

  /* === SHADOWS === */
  --shadow-soft: 0 4px 24px rgba(26, 24, 20, 0.06);
  --shadow-medium: 0 8px 40px rgba(26, 24, 20, 0.1);
  --shadow-strong: 0 16px 64px rgba(26, 24, 20, 0.15);

  /* === LEGACY MAPPINGS (compatibilidade temporária) === */
  /* Remover após migração completa */
  --font-family: var(--font-display);
  --primary: var(--accent-primary);
  --primary-dark: var(--accent-dark);
  --primary-light: var(--accent-hover);
  --text-dark: var(--text-primary);
  --text-light: var(--text-secondary);
  --background: var(--bg-primary);
  --background-alt: var(--bg-secondary);
  --border-color: #a89f91;
}