/*
 * fahrenwir Design Tokens
 * Version: 1.1.0
 */

:root {
    /* Brand */
    --color-primary: #8B7355;
    --color-secondary: #6B5A47;
    --color-accent: #C4B59D;
    
    /* WCAG 2.2 AA Accessible Variants (added 2025-12-05) */
    --color-primary-accessible: #6B5A47;  /* 6.02:1 on cream, 6.61:1 on white */
    --color-cta-accessible: #9A5D3D;      /* 5.24:1 for white text */
    --color-decorative-text: #988870;     /* 3.14:1 on cream - for large decorative text */
    
    /* Neutrals */
    --color-beige: #D9CCBA;
    --color-beige-light: #EDE6DB;
    --color-cream: #F7F4EF;
    --color-white: #FFFFFF;
    --color-black: #1F1B17;
    
    /* Surfaces */
    --color-bg: var(--color-cream);
    --color-surface: var(--color-white);
    --color-border: var(--color-beige);
    --color-polaroid: #F9F6F0;
    
    /* Text */
    --color-text: var(--color-black);
    --color-text-muted: var(--color-secondary);
    
    /* Interactive */
    --color-cta: #B86F4A;
    --color-cta-hover: #9A5D3D;
    --color-focus: var(--color-cta);
    
    /* Status */
    --color-warning: #C9873A;
    
    /* Shadows */
    --shadow-polaroid: 0 6px 25px rgba(107, 90, 71, 0.25);
    --shadow-polaroid-subtle: 0 4px 15px rgba(107, 90, 71, 0.2);
    --shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.3);
    
    /* Overlay */
    --color-overlay: rgba(31, 27, 23, 0.7);
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 100px;
    
    /* Transitions */
    --transition-fast: 0.1s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.5s ease;
}

[data-theme="dark"] {
    --color-primary: #C4B59D;
    --color-secondary: #A08868;
    --color-accent: #8B7355;
    --color-primary-accessible: #C4B59D;  /* 8.51:1 on dark bg - already sufficient */
    --color-cta-accessible: #B86F4A;      /* 3.88:1 - same as light, large text OK */
    --color-decorative-text: #7A7065;     /* 3.53:1 on dark bg - for large decorative text */
    --color-beige: #3D352C;
    --color-beige-light: #2A241E;
    --color-bg: #1F1B17;
    --color-surface: #2A241E;
    --color-border: #3D352C;
    --color-polaroid: #2A241E;
    --color-text: #EDE6DB;
    --color-text-muted: #A08868;
    --color-cta: #D4956A;
    --color-cta-hover: #B86F4A;
    --shadow-polaroid: 0 6px 25px rgba(0, 0, 0, 0.4);
    --shadow-polaroid-subtle: 0 4px 15px rgba(0, 0, 0, 0.3);
    --color-overlay: rgba(0, 0, 0, 0.8);
}