/* Design Tokens CSS File */
/* Generated from design-tokens.ts and theme.ts */

/* Typography Scale */
--font-size-5xl: 3rem;      /* 48px */
--font-size-4xl: 2.25rem;   /* 36px */
--font-size-3xl: 1.875rem;  /* 30px */
--font-size-2xl: 1.5rem;    /* 24px */
--font-size-xl: 1.25rem;   /* 20px */
--font-size-lg: 1.125rem;  /* 18px */
--font-size-base: 1rem;     /* 16px */
--font-size-sm: 0.875rem;  /* 14px */
--font-size-xs: 0.75rem;   /* 12px */

/* Font Weights */
--font-weight-thin: 100;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--font-weight-black: 900;

/* Line Heights */
--line-height-tight: 1.2;
--line-height-snug: 1.3;
--line-height-normal: 1.5;
--line-height-relaxed: 1.6;
--line-height-loose: 1.8;

/* Letter Spacing */
--letter-spacing-tight: -0.02em;
--letter-spacing-normal: 0em;
--letter-spacing-wide: 0.05em;
--letter-spacing-extra-wide: 0.1em;

/* Color Tokens - Primary Palette */
--color-primary-50: #faf5ff;
--color-primary-100: #f3e8ff;
--color-primary-200: #e9d5ff;
--color-primary-300: #d8b4fe;
--color-primary-400: #c084fc;
--color-primary-500: #a855f7;
--color-primary-600: #9333ea;
--color-primary-700: #7c3aed;
--color-primary-800: #6d28d9;
--color-primary-900: #581c87;

/* Color Tokens - Semantic Colors */
--color-success: #8b5cf6;
--color-warning: #7c3aed;
--color-error: #ef4444;
--color-info: #6366f1;
--color-teal: #8b5cf6;
--color-orange: #a855f7;
--color-purple: #a855f7;

/* Color Tokens - Secondary Palette */
--color-secondary-50: #faf5ff;
--color-secondary-100: #f3e8ff;
--color-secondary-200: #e9d5ff;
--color-secondary-300: #d8b4fe;
--color-secondary-400: #c084fc;
--color-secondary-500: #a855f7;
--color-secondary-600: #9333ea;
--color-secondary-700: #7c3aed;
--color-secondary-800: #6d28d9;
--color-secondary-900: #581c87;

/* Color Tokens - Accents */
--color-accent-300: #d8b4fe;
--color-accent-400: #c084fc;
--color-accent-500: #a855f7;
--color-accent-600: #9333ea;
--color-accent-700: #7c3aed;

/* Color Tokens - Status Colors */
--color-success-400: #c084fc;
--color-success-600: #9333ea;
--color-warning-400: #d8b4fe;
--color-warning-600: #7c3aed;
--color-error-400: #f87171;
--color-error-600: #dc2626;
--color-info-400: #a5b4fc;
--color-info-600: #4f46e5;

/* Spacing System */
--space-xs: 0.25rem;   /* 4px */
--space-sm: 0.5rem;    /* 8px */
--space-md: 1rem;      /* 16px */
--space-lg: 1.5rem;    /* 24px */
--space-xl: 2rem;      /* 32px */
--space-xxl: 3rem;     /* 48px */
--space-0: 0;

/* Border Radius */
--radius-none: 0;
--radius-sm: 0.375rem;   /* 6px */
--radius-md: 0.5rem;     /* 8px */
--radius-lg: 0.75rem;    /* 12px */
--radius-xl: 1rem;       /* 16px */
--radius-xxl: 1.5rem;    /* 24px */
--radius-full: 9999px;

/* Box Shadows */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
--shadow-hover: 0 8px 25px rgba(99, 102, 241, 0.15);
--shadow-elevated: 0 20px 40px rgba(99, 102, 241, 0.12);
--shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.1);
--shadow-primary: 0 4px 14px rgba(99, 102, 241, 0.25);
--shadow-success: 0 4px 14px rgba(168, 85, 247, 0.2);
--shadow-warning: 0 4px 14px rgba(124, 58, 237, 0.2);
--shadow-error: 0 4px 14px rgba(239, 68, 68, 0.2);
--shadow-none: none;

/* Animation Durations */
--duration-fast: 0.15s;
--duration-normal: 0.3s;
--duration-slow: 0.6s;

/* Animation Easings */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);

/* Nested Radius Patterns */
--radius-card: var(--radius-lg);
--radius-card-internal: var(--radius-md);
--radius-button: var(--radius-full);
--radius-input: var(--radius-lg);
--radius-dialog: var(--radius-xxl);

/* Component Specific Spacing */
--card-padding: 1.5rem;
--card-gap: 1.5rem;
--form-field-spacing: 1.5rem;
--form-group-spacing: 2rem;
--element-gap: 1rem;
--element-gap-sm: 0.75rem;

/* Background and Surface Colors */
--background: #0f172a;
--card: #0f172a;
--border-primary: #334155;

/* Glassmorphism backdrop blur (for future use) */
--backdrop-blur-sm: blur(4px);
--backdrop-blur-md: blur(8px);
--backdrop-blur-lg: blur(16px);

/* Transition Properties */
--transition-button: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
--transition-card: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--transition-input: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);