/* Design System Variables - Craft-Inspired Theme */

:root {
    /* Brand colors - Navy from logo */
    --primary-50: #f0f4f8;
    --primary-100: #d9e2ec;
    --primary-200: #bcccdc;
    --primary-300: #9fb3c8;
    --primary-400: #829ab1;
    --primary-500: #627d98;
    --primary-600: #486581;
    --primary-700: #334e68;
    --primary-800: #243b53;
    --primary-900: #1a2332;

    /* Warm accent colors for crafters */
    --accent-50: #fef8f0;
    --accent-100: #fceee0;
    --accent-200: #f8d9ba;
    --accent-300: #f4c494;
    --accent-400: #e8a05d;
    --accent-500: #d97f2e;
    --accent-600: #b86826;
    --accent-700: #8f511e;
    --accent-800: #663a16;
    --accent-900: #42250e;

    /* Neutral warm grays */
    --gray-50: #fafaf9;
    --gray-100: #f5f5f4;
    --gray-200: #e7e5e4;
    --gray-300: #d6d3d1;
    --gray-400: #a8a29e;
    --gray-500: #78716c;
    --gray-600: #57534e;
    --gray-700: #44403c;
    --gray-800: #292524;
    --gray-900: #1c1917;

    /* Cream/Beige tones */
    --cream-50: #fdfcfb;
    --cream-100: #faf8f5;
    --cream-200: #f5f1ea;
    --cream-300: #ebe5d9;
    --cream-400: #d9cdb8;
    --cream-500: #c4b5a0;

    --success-500: #059669;
    --warning-500: #d97706;
    --error-500: #dc2626;

    /* Theme-aware colors - Warm, craft-inspired palette */
    --bg-primary: #faf8f5;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f5f1ea;
    --bg-accent: #fef8f0;
    --text-primary: #292524;
    --text-secondary: #57534e;
    --text-tertiary: #78716c;
    --border-color: #e7e5e4;
    --border-color-strong: #d6d3d1;
    --shadow-color: rgba(87, 83, 78, 0.12);
    --shadow-color-strong: rgba(87, 83, 78, 0.25);
    --overlay-bg: rgba(255, 255, 255, 0.97);
    --input-bg: #ffffff;
    --canvas-bg: #ffffff;
    --preview-bg: #faf8f5;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* Typography */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 var(--shadow-color);
    --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
    --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color);
    --shadow-xl: 0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color);

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
}