/**
 * MinikOkur Design System Tokens
 * 
 * Curated HSL satin color schemes, dyslexia-friendly backgrounds,
 * spacing variables, smooth transitions, and premium typography scales.
 */

:root {
    --font-sans: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    
    /* 1. Satin HSL Color Palette */
    --mk-bg-h: 40;
    --mk-bg-s: 30%;
    --mk-bg-l: 94%;
    --mk-bg: hsl(var(--mk-bg-h), var(--mk-bg-s), var(--mk-bg-l));           /* Eye-relaxing creamy beige: #F8F3E8 */
    
    --mk-surface-h: 42;
    --mk-surface-s: 40%;
    --mk-surface-l: 98%;
    --mk-surface: hsl(var(--mk-surface-h), var(--mk-surface-s), var(--mk-surface-l));   /* Premium light card surface: #FFFDF7 */
    --mk-surface-soft: #F1EAD8;
    
    --mk-primary-h: 183;
    --mk-primary-s: 42%;
    --mk-primary-l: 32%;
    --mk-primary: hsl(var(--mk-primary-h), var(--mk-primary-s), var(--mk-primary-l));   /* Satin petrol: #2F6F73 */
    --mk-primary-hover: hsl(var(--mk-primary-h), var(--mk-primary-s), calc(var(--mk-primary-l) - 8%));
    --mk-primary-soft: hsl(var(--mk-primary-h), var(--mk-primary-s), 90%);
    
    --mk-secondary-h: 258;
    --mk-secondary-s: 25%;
    --mk-secondary-l: 48%;
    --mk-secondary: hsl(var(--mk-secondary-h), var(--mk-secondary-s), var(--mk-secondary-l)); /* Gentle violet: #6D5B98 */
    --mk-secondary-soft: hsl(var(--mk-secondary-h), var(--mk-secondary-s), 92%);
    
    --mk-accent-h: 43;
    --mk-accent-s: 88%;
    --mk-accent-l: 66%;
    --mk-accent: hsl(var(--mk-accent-h), var(--mk-accent-s), var(--mk-accent-l));       /* Calm highlighting yellow: #F4C95D */
    --mk-accent-soft: hsl(var(--mk-accent-h), var(--mk-accent-s), 88%);
    
    --mk-text-h: 210;
    --mk-text-s: 33%;
    --mk-text-l: 19%;
    --mk-text: hsl(var(--mk-text-h), var(--mk-text-s), var(--mk-text-l));               /* Deep slate: #203040 */
    --mk-text-muted: hsl(var(--mk-text-h), 12%, 45%);                                   /* Neutral grey: #5E6A75 */
    
    --mk-border: hsl(var(--mk-bg-h), 22%, 80%);                                         /* Warm card border */
    
    --mk-success: #3D8B5A;
    --mk-warning: #B7791F;
    --mk-danger: #B94A48;
    --mk-focus: #1D70B8;
    
    /* 2. Spacing Scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    
    /* 3. Typography Scale */
    --font-xs: 0.8125rem;   /* 13px */
    --font-sm: 0.9375rem;   /* 15px */
    --font-base: 1rem;      /* 16px */
    --font-md: 1.125rem;    /* 18px */
    --font-lg: 1.25rem;     /* 20px */
    --font-xl: 1.5rem;      /* 24px */
    --font-2xl: 2rem;       /* 32px */
    --font-3xl: 2.75rem;    /* 44px */
    
    /* 4. Shadow System */
    --shadow-sm: 0 2px 8px rgba(32, 48, 64, 0.04);
    --shadow-md: 0 8px 24px rgba(32, 48, 64, 0.06);
    --shadow-lg: 0 16px 40px rgba(32, 48, 64, 0.1);
    
    /* 5. Rounded Borders */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 9999px;
    
    /* 6. Micro Animations */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s ease-out;
}