/* themes.css - Custom Color Themes */
/* 
   By default, the application uses the "amber" and "stone" palettes defined in styles.css.
   These data-theme overrides remap the CSS variables used by Tailwind utility classes
   to achieve a completely different look while keeping the HTML structure intact.
*/

/* =========================================
   THEME: CALDAS (from caldasworks.com)
   High-contrast B&W with Purple + Green accents
   Accent -> Purple (replaces Amber)
   Neutral -> True Neutral (replaces Stone)
   ========================================= */
[data-theme="caldas"] {
    /* Primary / Accent — Purple from caldasworks.com */
    --color-primary: #7c3aed;
    --color-accent: #a855f7;

    --color-amber-500: #a855f7;
    --color-amber-600: #7c3aed;
    --color-amber-700: #6d28d9;
    --color-amber-900: #4c1d95;

    --color-amber-500-80: rgba(168, 85, 247, 0.8);
    --color-amber-500-50: rgba(168, 85, 247, 0.5);
    --color-amber-500-30: rgba(168, 85, 247, 0.3);
    --color-amber-500-10: rgba(168, 85, 247, 0.1);
    --color-amber-900-40: rgba(76, 29, 149, 0.4);

    --color-primary-80: rgba(124, 58, 237, 0.8);
    --color-primary-50: rgba(124, 58, 237, 0.5);
    --color-primary-20: rgba(124, 58, 237, 0.2);
    --color-primary-5: rgba(124, 58, 237, 0.05);

    /* Green accent from Leica branding on the site */
    --color-green-100: #dcfce7;
    --color-green-200: #bbf7d0;
    --color-green-600: #5fc63f;
    --color-green-100-50: rgba(220, 252, 231, 0.5);

    /* Neutrals — True neutral grays from caldasworks.com */
    --color-stone-50: #ffffff;
    --color-stone-100: #f3f3f3;
    --color-stone-300: #e0e0e0;
    --color-stone-400: #a3a3a3;
    --color-stone-500: #737373;
    --color-stone-600: #555555;
    --color-stone-700: #333333;
    --color-stone-900: #1a1c1c;
    --color-stone-950: #111111;

    --color-stone-50-80: rgba(255, 255, 255, 0.8);
    --color-stone-950-80: rgba(17, 17, 17, 0.8);
    --color-stone-300-40: rgba(224, 224, 224, 0.4);
    --color-stone-700-40: rgba(51, 51, 51, 0.4);

    /* Surfaces */
    --color-surface: #ffffff;
    --color-surface-bright: #ffffff;
    --color-surface-dim: #e0e0e0;
    --color-surface-container: #f3f3f3;
    --color-surface-container-low: #f7f7f7;
    --color-surface-container-high: #ebebeb;
    --color-surface-container-highest: #e0e0e0;
    --color-surface-container-lowest: #ffffff;
    --color-surface-variant: #e0e0e0;
    --color-surface-tint: #7c3aed;
    --color-surface-50: rgba(255, 255, 255, 0.5);
    --color-surface-80: rgba(255, 255, 255, 0.8);

    --color-on-surface: #000000;
    --color-on-surface-variant: #555555;
    --color-background: #ffffff;
    --color-on-background: #000000;
    --color-bg-dark-section: #1a1c1c;

    /* Outline */
    --color-outline: #555555;
    --color-outline-variant: #e0e0e0;
    --color-outline-variant-20: rgba(224, 224, 224, 0.2);
    --color-outline-variant-30: rgba(224, 224, 224, 0.3);
    --color-outline-variant-50: rgba(224, 224, 224, 0.5);
    --color-outline-variant-60: rgba(224, 224, 224, 0.6);
    --color-outline-10: rgba(85, 85, 85, 0.1);
    --color-outline-30: rgba(85, 85, 85, 0.3);

    /* Material tokens */
    --color-on-primary: #ffffff;
    --color-primary-container: #6d28d9;
    --color-on-primary-container: #f5f3ff;
    --color-on-primary-fixed: #2e1065;
    --color-on-primary-fixed-variant: #4c1d95;
    --color-primary-fixed: #ede9fe;
    --color-primary-fixed-dim: #a855f7;
    --color-inverse-primary: #c4b5fd;
    --color-inverse-surface: #1a1c1c;
    --color-inverse-on-surface: #f3f3f3;

    --shadow-primary-15: rgba(124, 58, 237, 0.15);
    --shadow-primary-20: rgba(124, 58, 237, 0.2);
    --shadow-primary-25: rgba(124, 58, 237, 0.25);
}
/* 
   By default, the application uses the "amber" and "stone" palettes defined in styles.css.
   These data-theme overrides remap the CSS variables used by Tailwind utility classes
   to achieve a completely different look while keeping the HTML structure intact.
*/

/* =========================================
   THEME: BLUE
   Accent -> Blue (replaces Amber)
   Neutral -> Slate (replaces Stone)
   ========================================= */
[data-theme="blue"] {
    /* Primary / Accent (Mapped to Blue 500-900) */
    --color-primary: #2563eb;
    --color-accent: #3b82f6;
    
    --color-amber-500: #3b82f6;
    --color-amber-600: #2563eb;
    --color-amber-700: #1d4ed8;
    --color-amber-900: #1e3a8a;

    --color-amber-500-80: rgba(59, 130, 246, 0.8);
    --color-amber-500-50: rgba(59, 130, 246, 0.5);
    --color-amber-500-30: rgba(59, 130, 246, 0.3);
    --color-amber-500-10: rgba(59, 130, 246, 0.1);
    --color-amber-900-40: rgba(30, 58, 138, 0.4);

    --color-primary-80: rgba(37, 99, 235, 0.8);
    --color-primary-50: rgba(37, 99, 235, 0.5);
    --color-primary-20: rgba(37, 99, 235, 0.2);
    --color-primary-5: rgba(37, 99, 235, 0.05);
    
    --color-primary-container: #1e40af;
    --color-on-primary-container: #dbeafe;
    
    --color-primary-fixed: #dbeafe;
    --color-primary-fixed-dim: #bfdbfe;
    --color-on-primary-fixed: #1e3a8a;
    --color-on-primary-fixed-variant: #1e40af;

    /* Neutrals (Mapped to Slate) */
    --color-stone-50: #f8fafc;
    --color-stone-100: #f1f5f9;
    --color-stone-300: #cbd5e1;
    --color-stone-400: #94a3b8;
    --color-stone-500: #64748b;
    --color-stone-600: #475569;
    --color-stone-700: #334155;
    --color-stone-900: #0f172a;
    --color-stone-950: #020617;

    --color-stone-50-80: rgba(248, 250, 252, 0.8);
    --color-stone-950-80: rgba(2, 6, 23, 0.8);
    --color-stone-300-40: rgba(203, 213, 225, 0.4);
    --color-stone-700-40: rgba(51, 65, 85, 0.4);

    --shadow-primary-15: rgba(37, 99, 235, 0.15);
    --shadow-primary-20: rgba(37, 99, 235, 0.2);
    --shadow-primary-25: rgba(37, 99, 235, 0.25);
}

/* =========================================
   THEME: GREEN
   Accent -> Emerald (replaces Amber)
   Neutral -> Gray (replaces Stone)
   ========================================= */
[data-theme="green"] {
    /* Primary / Accent (Mapped to Emerald 500-900) */
    --color-primary: #059669;
    --color-accent: #10b981;
    
    --color-amber-500: #10b981;
    --color-amber-600: #059669;
    --color-amber-700: #047857;
    --color-amber-900: #064e3b;

    --color-amber-500-80: rgba(16, 185, 129, 0.8);
    --color-amber-500-50: rgba(16, 185, 129, 0.5);
    --color-amber-500-30: rgba(16, 185, 129, 0.3);
    --color-amber-500-10: rgba(16, 185, 129, 0.1);
    --color-amber-900-40: rgba(6, 78, 59, 0.4);

    --color-primary-80: rgba(5, 150, 105, 0.8);
    --color-primary-50: rgba(5, 150, 105, 0.5);
    --color-primary-20: rgba(5, 150, 105, 0.2);
    --color-primary-5: rgba(5, 150, 105, 0.05);
    
    --color-primary-container: #065f46;
    --color-on-primary-container: #d1fae5;
    
    --color-primary-fixed: #d1fae5;
    --color-primary-fixed-dim: #a7f3d0;
    --color-on-primary-fixed: #064e3b;
    --color-on-primary-fixed-variant: #065f46;

    /* Neutrals (Mapped to Gray) */
    --color-stone-50: #f9fafb;
    --color-stone-100: #f3f4f6;
    --color-stone-300: #d1d5db;
    --color-stone-400: #9ca3af;
    --color-stone-500: #6b7280;
    --color-stone-600: #4b5563;
    --color-stone-700: #374151;
    --color-stone-900: #111827;
    --color-stone-950: #030712;

    --color-stone-50-80: rgba(249, 250, 251, 0.8);
    --color-stone-950-80: rgba(3, 7, 18, 0.8);
    --color-stone-300-40: rgba(209, 213, 219, 0.4);
    --color-stone-700-40: rgba(55, 65, 81, 0.4);

    --shadow-primary-15: rgba(5, 150, 105, 0.15);
    --shadow-primary-20: rgba(5, 150, 105, 0.2);
    --shadow-primary-25: rgba(5, 150, 105, 0.25);
}

/* =========================================
   THEME: RED
   Accent -> Rose (replaces Amber)
   Neutral -> Zinc (replaces Stone)
   ========================================= */
[data-theme="red"] {
    /* Primary / Accent (Mapped to Rose 500-900) */
    --color-primary: #e11d48;
    --color-accent: #f43f5e;
    
    --color-amber-500: #f43f5e;
    --color-amber-600: #e11d48;
    --color-amber-700: #be123c;
    --color-amber-900: #881337;

    --color-amber-500-80: rgba(244, 63, 94, 0.8);
    --color-amber-500-50: rgba(244, 63, 94, 0.5);
    --color-amber-500-30: rgba(244, 63, 94, 0.3);
    --color-amber-500-10: rgba(244, 63, 94, 0.1);
    --color-amber-900-40: rgba(136, 19, 55, 0.4);

    --color-primary-80: rgba(225, 29, 72, 0.8);
    --color-primary-50: rgba(225, 29, 72, 0.5);
    --color-primary-20: rgba(225, 29, 72, 0.2);
    --color-primary-5: rgba(225, 29, 72, 0.05);
    
    --color-primary-container: #9f1239;
    --color-on-primary-container: #ffe4e6;
    
    --color-primary-fixed: #ffe4e6;
    --color-primary-fixed-dim: #fecdd3;
    --color-on-primary-fixed: #881337;
    --color-on-primary-fixed-variant: #9f1239;

    /* Neutrals (Mapped to Zinc) */
    --color-stone-50: #fafafa;
    --color-stone-100: #f4f4f5;
    --color-stone-300: #d4d4d8;
    --color-stone-400: #a1a1aa;
    --color-stone-500: #71717a;
    --color-stone-600: #52525b;
    --color-stone-700: #3f3f46;
    --color-stone-900: #18181b;
    --color-stone-950: #09090b;

    --color-stone-50-80: rgba(250, 250, 250, 0.8);
    --color-stone-950-80: rgba(9, 9, 11, 0.8);
    --color-stone-300-40: rgba(212, 212, 216, 0.4);
    --color-stone-700-40: rgba(63, 63, 70, 0.4);

    --shadow-primary-15: rgba(225, 29, 72, 0.15);
    --shadow-primary-20: rgba(225, 29, 72, 0.2);
    --shadow-primary-25: rgba(225, 29, 72, 0.25);
}

/* =========================================
   THEME: BLACK / MONOCHROME
   Accent -> Neutral (replaces Amber)
   Neutral -> True Neutral (replaces Stone)
   ========================================= */
[data-theme="black"] {
    /* Primary / Accent (Mapped to Neutral 500-900) */
    --color-primary: #52525b;
    --color-accent: #71717a;
    
    --color-amber-500: #71717a;
    --color-amber-600: #52525b;
    --color-amber-700: #3f3f46;
    --color-amber-900: #18181b;

    --color-amber-500-80: rgba(113, 113, 122, 0.8);
    --color-amber-500-50: rgba(113, 113, 122, 0.5);
    --color-amber-500-30: rgba(113, 113, 122, 0.3);
    --color-amber-500-10: rgba(113, 113, 122, 0.1);
    --color-amber-900-40: rgba(24, 24, 27, 0.4);

    --color-primary-80: rgba(82, 82, 91, 0.8);
    --color-primary-50: rgba(82, 82, 91, 0.5);
    --color-primary-20: rgba(82, 82, 91, 0.2);
    --color-primary-5: rgba(82, 82, 91, 0.05);
    
    --color-primary-container: #27272a;
    --color-on-primary-container: #f4f4f5;
    
    --color-primary-fixed: #f4f4f5;
    --color-primary-fixed-dim: #e4e4e7;
    --color-on-primary-fixed: #18181b;
    --color-on-primary-fixed-variant: #27272a;

    /* Neutrals (Mapped to True Neutral) */
    --color-stone-50: #ffffff;
    --color-stone-100: #f5f5f5;
    --color-stone-300: #e5e5e5;
    --color-stone-400: #a3a3a3;
    --color-stone-500: #737373;
    --color-stone-600: #52525b;
    --color-stone-700: #404040;
    --color-stone-900: #171717;
    --color-stone-950: #0a0a0a;

    --color-stone-50-80: rgba(255, 255, 255, 0.8);
    --color-stone-950-80: rgba(10, 10, 10, 0.8);
    --color-stone-300-40: rgba(229, 229, 229, 0.4);
    --color-stone-700-40: rgba(64, 64, 64, 0.4);

    --shadow-primary-15: rgba(82, 82, 91, 0.15);
    --shadow-primary-20: rgba(82, 82, 91, 0.2);
    --shadow-primary-25: rgba(82, 82, 91, 0.25);
}