/* src/styles/tokens.css */

:root {
  /* Color Tokens - HRUHRA UX Design System V2.1 Aligned */
  --color-gradient-start: #9039F5;
  --color-gradient-end: #D56241;
  --color-accent-gradient: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%);

  --color-bg-primary: #0A0A0A;
  --color-bg-secondary: #1A1A1A;
  --color-bg-elevated: #2C2C2C;
  --color-bg-glass: rgba(255, 255, 255, 0.04);

  --color-text-primary: #F6F6F6;
  --color-text-secondary: #EAEAEA;
  --color-text-muted: #A8A8A8;

  --color-success: #2ECC71;
  --color-error: #E74C3C;
  --color-warning: #F39C12;
  --color-disabled: #666666;
  --color-text-on-accent: #FFFFFF;

  /* Typography Tokens - HRUHRA V2.1 Aligned */
  --font-primary: 'Acumin Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-accent: 'Script', cursive;

  /* Spacing Scale (8px Base) */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;

  /* Elevation System */
  --elevation-1: 0 4px 12px rgba(0, 0, 0, 0.2);
  --elevation-2: 0 8px 24px rgba(0, 0, 0, 0.25);
  --elevation-3: 0 16px 48px rgba(0, 0, 0, 0.3);

  /* Glassmorphism */
  --glass-blur: blur(8px);
  --glass-overlay: rgba(255, 255, 255, 0.04);

  /* Motion */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --ease-primary: cubic-bezier(0.4, 0, 0.2, 1);

  /* Responsive & Layout Tokens */
  --header-height: 72px;
  --header-height-mobile: 64px;
  --container-max-width: 1200px;

  /* Breakpoints */
  --breakpoint-desktop: 1280px;
  --breakpoint-tablet: 768px;
  --breakpoint-mobile: 320px;
}