/* ============================================
   Anima Design Tokens
   Source: brand/visual-identity.md
   ============================================ */

:root {
  /* === Colors: Dark Mode (Primary) === */
  --color-void: #0A0F1E;
  --color-obsidian: #141B2D;
  --color-smoke: rgba(255, 255, 255, 0.05);
  --color-amber: #F0A500;
  --color-amber-glow: rgba(240, 165, 0, 0.15);
  --color-amber-glow-strong: rgba(240, 165, 0, 0.4);
  --color-blue: #4A7BF7;
  --color-text: #E2E8F0;
  --color-text-muted: #94A3B8;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(240, 165, 0, 0.15);

  /* === Product Accent Colors === */
  --accent-essentia: #FF6B4A;
  --accent-essentia-glow: rgba(255, 107, 74, 0.15);
  --accent-praesaga: #00D4AA;
  --accent-praesaga-glow: rgba(0, 212, 170, 0.15);
  --accent-lucerna: #FFD166;
  --accent-lucerna-glow: rgba(255, 209, 102, 0.15);
  --accent-mensura: #5B9BD5;
  --accent-mensura-glow: rgba(91, 155, 213, 0.15);
  --accent-vigilia: #9B72CF;
  --accent-vigilia-glow: rgba(155, 114, 207, 0.15);
  --accent-verax: #4ADE80;
  --accent-verax-glow: rgba(74, 222, 128, 0.15);
  --accent-calibra: #E8915A;
  --accent-calibra-glow: rgba(232, 145, 90, 0.15);
  --accent-chat: #A8B4C4;
  --accent-chat-glow: rgba(168, 180, 196, 0.10);

  /* === Typography === */
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* === Type Scale (responsive) === */
  --text-hero: clamp(48px, 6vw, 80px);
  --text-section: clamp(32px, 4vw, 48px);
  --text-sub: clamp(20px, 2.5vw, 28px);
  --text-body-lg: clamp(17px, 1.8vw, 20px);
  --text-body: 16px;
  --text-small: 14px;
  --text-label: 12px;

  /* === Spacing === */
  --section-padding: clamp(80px, 10vw, 140px);
  --container-max: 1200px;
  --container-padding: clamp(20px, 4vw, 40px);
  --card-radius: 12px;
  --card-padding: 24px 28px;
  --btn-radius: 8px;

  /* === Effects === */
  --blur-glass: blur(16px);
  --blur-nav: blur(12px);
  --glow-btn: 0 0 20px rgba(240, 165, 0, 0.2), 0 0 60px rgba(240, 165, 0, 0.05);
  --glow-btn-hover: 0 0 30px rgba(240, 165, 0, 0.35), 0 0 80px rgba(240, 165, 0, 0.1);
  --glow-card-hover: 0 0 30px rgba(240, 165, 0, 0.05);
  --glow-data: 0 0 8px rgba(240, 165, 0, 0.4);

  /* === Easing === */
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-hover: cubic-bezier(0.4, 0, 0.2, 1);

  /* === Transitions === */
  --dur-hover: 200ms;
  --dur-reveal: 700ms;

  /* === Gradient Mesh === */
  --mesh-deep-blue: #0F1A3A;
  --mesh-deep-purple: #1A0F2E;
}