/**
 * Author Website Templates - Design Tokens & Variables
 * Standardized CSS Custom Properties and SCSS constants
 */

// Breakpoint Constants
$awt-breakpoint-sm: 640px;
$awt-breakpoint-md: 768px;
$awt-breakpoint-lg: 1024px;
$awt-breakpoint-xl: 1280px;
$awt-breakpoint-2xl: 1400px;

// Default Color Values (Fallbacks)
$awt-default-cream: #FFFDF5;
$awt-default-navy: #264653;
$awt-default-yellow-sun: #FFD166;
$awt-default-blue-sky: #00C6FF;
$awt-default-coral-pop: #EF476F;
$awt-default-primary: #0F172A;
$awt-default-secondary: #475569;
$awt-default-accent: #EA580C;
$awt-default-paper: #F8FAFC;

// CSS Custom Property Shortcuts
$awt-color-cream: var(--awt-color-cream, #{$awt-default-cream});
$awt-color-navy: var(--awt-color-navy, #{$awt-default-navy});
$awt-color-yellow-sun: var(--awt-color-yellow-sun, #{$awt-default-yellow-sun});
$awt-color-blue-sky: var(--awt-color-blue-sky, #{$awt-default-blue-sky});
$awt-color-coral-pop: var(--awt-color-coral-pop, #{$awt-default-coral-pop});
$awt-color-primary: var(--awt-color-primary, #{$awt-default-primary});
$awt-color-secondary: var(--awt-color-secondary, #{$awt-default-secondary});
$awt-color-accent: var(--awt-color-accent, #{$awt-default-accent});
$awt-color-paper: var(--awt-color-paper, #{$awt-default-paper});

// Typography Shortcuts
$awt-font-sans: var(--awt-font-sans, 'Nunito', sans-serif);
$awt-font-inter: var(--awt-font-inter, 'Inter', sans-serif);
$awt-font-serif: var(--awt-font-serif, 'Libre Baskerville', serif);

// Transitions
$awt-transition-fast: 0.15s ease-in-out;
$awt-transition-normal: 0.3s ease-in-out;
$awt-transition-slow: 0.5s ease-in-out;

// Border Radii
$awt-radius-sm: 0.375rem;   // 6px
$awt-radius-md: 0.5rem;     // 8px
$awt-radius-lg: 0.75rem;    // 12px
$awt-radius-xl: 1rem;       // 16px
$awt-radius-2xl: 1.5rem;    // 24px
$awt-radius-full: 9999px;

// Shadows
$awt-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
$awt-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
$awt-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
$awt-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
$awt-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);