/* VaryOn AI Design System - Design Tokens */
/* 🚨 MANDATORY: Import this file in ALL component CSS files */
/* Reference: /VARYON_BRAND_GUIDELINES.md */

/* System Fonts - Universal Typography */

:root {
  /* ===== TYPOGRAPHY SYSTEM ===== */
  /* Font Families (Universal - Single Font) */
  --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Legacy font support */
  --varyon-font-primary: var(--font-heading);
  --varyon-font-display: var(--font-heading);
  --varyon-font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

  /* ===== BRAND COLORS (Updated VaryOn Palette) ===== */
  /* Primary Purple Scale */
  --varyon-purple-900: #6d3770;
  --varyon-purple-700: #8f4993;
  --varyon-purple-500: #A567AA;
  --varyon-purple-300: #C199C6;
  --varyon-purple-100: #E8D5EA;

  /* Legacy purple support */
  --varyon-purple-200: var(--varyon-purple-300);
  --varyon-purple-400: var(--varyon-purple-500);
  --varyon-purple-600: var(--varyon-purple-700);
  --varyon-purple-800: var(--varyon-purple-900);

  /* Neutral Scale (VaryOn Brand) */
  --varyon-slate-900: #191919;
  --varyon-slate-800: #262625;
  --varyon-slate-600: #40403E;
  --varyon-slate-400: #666663;
  --varyon-slate-300: #91918D;
  --varyon-slate-200: #BFBFBA;
  --varyon-slate-100: #E5E4DF;
  --varyon-slate-50: #F0F0EB;

  /* Background Colors (VaryOn Brand) */
  --varyon-background-primary: #f6f0e7;
  --varyon-background-secondary: #F0F0EB;
  --varyon-background-tertiary: #E5E4DF;
  --varyon-surface: #FFFFFF;

  /* Cream/Background Scale */
  --varyon-cream-50: #fdfaf2;
  --varyon-cream-100: #f8f4e8;
  --varyon-cream-200: #f0ebdd;
  --varyon-white: #ffffff;

  /* ===== TYPOGRAPHY ===== */
  /* Font Sizes - Major Third Scale (1.25 ratio) */
  --varyon-text-display-2xl: 4.5rem;
  --varyon-text-display-xl: 3.6rem;
  --varyon-text-display-lg: 3rem;
  --varyon-text-display-md: 2.25rem;

  --varyon-text-h1: 2.5rem;
  --varyon-text-h2: 2rem;
  --varyon-text-h3: 1.5rem;
  --varyon-text-h4: 1.25rem;
  --varyon-text-h5: 1.125rem;
  --varyon-text-h6: 1rem;

  --varyon-text-xl: 1.25rem;
  --varyon-text-lg: 1.125rem;
  --varyon-text-base: 1rem;
  --varyon-text-sm: 0.875rem;
  --varyon-text-xs: 0.75rem;

  /* Font Weights */
  --varyon-font-light: 300;
  --varyon-font-regular: 400;
  --varyon-font-medium: 500;
  --varyon-font-semibold: 600;
  --varyon-font-bold: 700;

  /* Line Heights */
  --varyon-leading-tight: 1.25;
  --varyon-leading-snug: 1.375;
  --varyon-leading-normal: 1.5;
  --varyon-leading-relaxed: 1.625;

  /* Letter Spacing */
  --varyon-tracking-tighter: -0.05em;
  --varyon-tracking-tight: -0.025em;
  --varyon-tracking-normal: 0;
  --varyon-tracking-wide: 0.025em;
  --varyon-tracking-wider: 0.05em;

  /* ===== SPACING SCALE (8px base unit) ===== */
  --varyon-space-1: 0.25rem;
  --varyon-space-2: 0.5rem;
  --varyon-space-3: 0.75rem;
  --varyon-space-4: 1rem;
  --varyon-space-5: 1.25rem;
  --varyon-space-6: 1.5rem;
  --varyon-space-8: 2rem;
  --varyon-space-10: 2.5rem;
  --varyon-space-12: 3rem;
  --varyon-space-16: 4rem;
  --varyon-space-20: 5rem;
  --varyon-space-24: 6rem;
  --varyon-space-32: 8rem;

  /* ===== BORDER RADIUS ===== */
  --varyon-radius-sm: 0.125rem;
  --varyon-radius-base: 0.25rem;
  --varyon-radius-md: 0.375rem;
  --varyon-radius-lg: 0.5rem;
  --varyon-radius-xl: 0.75rem;
  --varyon-radius-2xl: 1rem;
  --varyon-radius-3xl: 1.25rem;
  --varyon-radius-full: 9999px;

  /* ===== SHADOWS ===== */
  --varyon-shadow-sm: 0 1px 2px rgba(22, 20, 14, 0.05);
  --varyon-shadow-base: 0 1px 3px rgba(22, 20, 14, 0.1);
  --varyon-shadow-md: 0 4px 6px rgba(22, 20, 14, 0.07);
  --varyon-shadow-lg: 0 4px 20px rgba(22, 20, 14, 0.08);
  --varyon-shadow-xl: 0 8px 32px rgba(22, 20, 14, 0.12);
  --varyon-shadow-purple: 0 4px 12px rgba(143, 73, 147, 0.3);

  /* ===== ANIMATION ===== */
  --varyon-duration-fast: 150ms;
  --varyon-duration-normal: 200ms;
  --varyon-duration-slow: 300ms;
  --varyon-duration-slower: 500ms;

  --varyon-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --varyon-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --varyon-ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ===== Z-INDEX SCALE ===== */
  --varyon-z-base: 0;
  --varyon-z-sticky: 1020;
  --varyon-z-overlay: 1040;
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

::selection {
  background: var(--varyon-purple-100);
  color: var(--varyon-slate-900);
}