/**
 * GenForm Design Tokens
 * 
 * All variables for colors, typography, spacing and shadows.
 */

// ========================================
// 1. Core Brand Colors (Premium Admin)
// ========================================
$primary: #4F46E5; // Modern vibrant indigo
$primary-dark: #3730A3;
$primary-light: #EEF2FF;
$primary-alt: #818CF8;

// ========================================
// 2. Legacy/Frontend Brand (WP Style)
// ========================================
$gfm-color-brand: #0073aa;
$gfm-color-brand-dark: #005a87;
$gfm-color-text: #1e293b;
$gfm-color-text-secondary: #64748b;

// ========================================
// 3. Status & Semantic Colors
// ========================================
$success: #10B981; // Emerald
$danger: #EF4444; // Rose
$warning: #F59E0B; // Amber
$info: #0EA5E9; // Sky

// Semantic mapping for frontend
$gfm-color-success: #ECFDF5;
$gfm-color-success-text: #065F46;
$gfm-color-success-border: #D1FAE5;

$gfm-color-error: #FEF2F2;
$gfm-color-error-text: #991B1B;
$gfm-color-error-border: #FEE2E2;

$gfm-color-warning: #FFFBEB;
$gfm-color-warning-text: #92400E;
$gfm-color-warning-border: #FEF3C7;

$gfm-color-info: #F0F9FF;
$gfm-color-info-text: #075985;
$gfm-color-info-border: #E0F2FE;

// ========================================
// 4. Neutral Palette
// ========================================
$white: #ffffff;
$bg: #F9FAFB;
$text-main: #111827; // Slate 900
$text-muted: #6B7280; // Slate 500
$text-light: #9CA3AF;
$border: #E5E7EB; // Gray 200
$border-dark: #D1D5DB; // Gray 300

// ========================================
// 5. Breakpoints
// ========================================
$gfm-bp-sm: 576px;
$gfm-bp-md: 768px;
$gfm-bp-lg: 992px;
$gfm-bp-xl: 1200px;
$gfm-bp-xxl: 1400px;

// ========================================
// 6. Typography
// ========================================
$font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
$size-base: 14px;
$size-sm: 12.5px;
$size-lg: 18px;
$size-xl: 24px;
$weight-medium: 500;
$weight-bold: 600;

// ========================================
// 7. Layout & Spacing
// ========================================
$radius: 12px;
$radius-md: 10px;
$radius-sm: 6px;
$radius-lg: 16px;
$radius-full: 9999px;

// Realistic Shadows
$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

// Rhythm
$space-xs: 8px;
$space-sm: 16px;
$space-md: 24px;
$space-lg: 32px;
$space-xl: 48px;

// Form Relief
$input-height: 48px;
$input-padding: 0 16px;

// Effects
$glass-bg: rgba(255, 255, 255, 0.8);
$glass-border: rgba(255, 255, 255, 0.3);
$transition-base: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
$transition-bounce: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);