/* ================================================================================
   THEME.CSS - Theme-specific design tokens
   Single source of truth for colours, gradients, backgrounds, borders, shadows.
   Everything here changes between light and dark modes.
   ================================================================================ */

/* ================================
   LIGHT THEME (Default)
   ================================ */
:root {
    /* ============ GRADIENTS ============ */
    --primary-gradient: 
        radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.9) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.9) 0%, transparent 50%),
        rgba(0, 0, 0, 0.85);
   
    --purple-gradient: 
        radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.9) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.9) 0%, transparent 50%),
        rgba(0, 0, 0, 0.85);

    --orange-gradient: 
        radial-gradient(circle at 25% 75%, rgba(249, 115, 22, 0.9) 0%, transparent 50%),
        radial-gradient(circle at 75% 25%, rgba(234, 88, 12, 0.9) 0%, transparent 50%),
        rgba(0, 0, 0, 0.85);

    --green-gradient: 
        radial-gradient(circle at 25% 75%, rgba(16, 185, 129, 0.9) 0%, transparent 50%),
        radial-gradient(circle at 75% 25%, rgba(5, 150, 105, 0.9) 0%, transparent 50%),
        rgba(0, 0, 0, 0.85);

    --pink-gradient: 
        radial-gradient(circle at 25% 75%, rgba(236, 72, 153, 0.9) 0%, transparent 50%),
        radial-gradient(circle at 75% 25%, rgba(219, 39, 119, 0.9) 0%, transparent 50%),
        rgba(0, 0, 0, 0.85);

    --blue-gradient: 
        radial-gradient(circle at 25% 75%, rgba(59, 130, 246, 0.9) 0%, transparent 50%),
        radial-gradient(circle at 75% 25%, rgba(37, 99, 235, 0.9) 0%, transparent 50%),
        rgba(0, 0, 0, 0.85);

    --yellow-gradient:
        radial-gradient(circle at 20% 80%, rgba(251, 191, 36, 0.9) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.9) 0%, transparent 50%),
        rgba(0, 0, 0, 0.85);

    --primary-gradient-simple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --primary-gradient-light: 
        radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.9) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.9) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.3) 0%, transparent 70%);

    --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --error-gradient: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --info-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    --currently-gradient: linear-gradient(135deg, #f97316 0%, #ea580c 100%);

    --header-gradient: radial-gradient(circle at 30% 20%, #667eea 0%, transparent 50%), radial-gradient(circle at 70%80%, #764ba2 0%, #1a1625 60%);

    /* ============ PAGE BACKGROUNDS ============ */
    --bg-home-page:
        radial-gradient(circle at 20% 80%, rgba(156, 163, 175, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(107, 114, 128, 0.3) 0%, transparent 50%),
        rgba(249, 250, 251, 1);
    --bg-home: rgba(248, 249, 250, 1);

    /* ============ SURFACE BACKGROUNDS ============ */
    --bg-white: rgba(255, 255, 255, 0.95);
    --bg-card: rgba(255, 255, 255, 1);
    --bg-card-elevated: rgba(255, 255, 255, 1);
    --bg-card-home: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(248, 249, 250, 0.8) 100%);
    --bg-section: rgba(248, 250, 252, 0.8);
    --bg-muted: rgba(241, 245, 249, 1);
    --bg-input: rgba(255, 255, 255, 1);
    --bg-option: rgba(248, 250, 252, 1);
    --bg-option-hover: rgba(241, 245, 249, 1);
    --bg-glass: rgba(255, 255, 255, 0.1);
    --bg-recent-finds: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(248, 249, 250, 0.8) 100%);

    /* ============ OVERLAY BACKGROUNDS ============ */
    --bg-modal: rgba(255, 255, 255, 0.98);
    --bg-overlay: rgba(0, 0, 0, 0.5);
    --bg-onboarding: rgba(0, 0, 0, 0.9);
    --modal-backdrop: rgba(0, 0, 0, 0.5);

    /* ============ ACCENT BACKGROUNDS ============ */
    --bg-purple: rgba(139, 92, 246, 0.1);
    --bg-orange: rgba(249, 115, 22, 0.1);
    --bg-green: rgba(16, 185, 129, 0.1);
    --bg-red: rgba(239, 68, 68, 0.1);
    --bg-blue: rgba(59, 130, 246, 0.1);
    --bg-gold: rgba(255, 215, 0, 0.1);
    --bg-grey: rgba(156, 163, 175, 0.1);

    /* Hover variants */
    --bg-green-hover: rgba(16, 185, 129, 0.08);
    --bg-gold-hover: rgba(255, 215, 0, 0.08);
    --bg-orange-hover: rgba(249, 115, 22, 0.08);
    --bg-red-hover: rgba(239, 68, 68, 0.08);
    --bg-grey-hover: rgba(156, 163, 175, 0.08);

    /* ============ TEXT COLORS ============ */
    --text-primary: rgba(45, 55, 72, 1);
    --text-secondary: rgba(74, 85, 104, 1);
    --text-muted: rgba(113, 128, 150, 1);
    --text-white: rgba(255, 255, 255, 1);
    --text-purple: rgba(118, 75, 162, 1);
    --text-link: #667eea;

    /* ============ BRAND COLORS ============ */
    --white: rgba(255, 255, 255, 1);
    --gold: rgba(255, 215, 0, 1);   
    --green: rgba(16, 185, 129, 1);
    --blue: rgba(59, 130, 246, 1);
    --red: rgba(239, 68, 68, 1);
    --purple: rgba(118, 75, 162, 1);
    --orange: rgba(249, 115, 22, 1);

    --level-gold: #fbbf24;
    --level-silver: #cbd5e1;
    --level-bronze: #fb923c;

    --dark-gold: rgba(253, 187, 4, 1);
    --dark-green: rgba(5, 150, 105, 1);
    --dark-blue: rgba(37, 99, 235, 1);
    --dark-orange: rgba(234, 88, 12, 1);
    --dark-red: rgba(185, 28, 28, 1);
    --dark-grey: rgba(96, 96, 96, 1);

    --light-blue: rgba(102, 126, 234, 1);
    --light-purple: rgba(240, 235, 245, 1);
    --light-orange: rgba(254, 215, 170, 1);
    --light-grey: rgba(156, 163, 175, 1);
    --grey-white: rgba(245, 245, 245, 1);

    /* ============ BORDERS ============ */
    --border-light: rgba(0, 0, 0, 0.1);
    --border-medium: rgba(0, 0, 0, 0.15);
    --border-purple: rgba(139, 92, 246, 0.3);
    --border-orange: rgba(249, 115, 22, 0.3);
    --border-green: rgba(16, 185, 129, 0.3);
    --border-red: rgba(239, 68, 68, 0.3);
    --border-blue: rgba(59, 130, 246, 0.3);
    --border-gold: rgba(251, 191, 36, 0.3);
    --border-recent-finds: rgba(139, 92, 246, 0.07);
    --border-status-currently: rgba(249, 115, 22, 0.3);
    --divider-color: rgba(102, 126, 234, 0.1);
    --modal-line: rgba(226, 232, 240, 1);

    /* ============ HOVER STATES ============ */
    --hover-subtle: rgba(102, 126, 234, 0.05);
    --hover-purple: rgba(139, 92, 246, 0.1);
    --hover-card: rgba(0, 0, 0, 0.02);

    /* ============ STATUS BACKGROUNDS ============ */
    --status-always-tap-cask-bg: rgba(255, 215, 0, 0.1);
    --status-always-bottle-can-bg: rgba(16, 185, 129, 0.1);
    --status-currently-bg: var(--orange);
    --status-not-currently-bg: rgba(239, 68, 68, 0.1);
    --status-unknown-bg: rgba(156, 163, 175, 0.1);

    /* ============ SHADOWS ============ */
    --shadow-xs: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.15);
    --shadow-hero-title: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-card-home: 0 4px 8px rgba(139, 92, 246, 0.12), 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-purple: rgba(139, 92, 246, 0.1);
    --shadow-recent-finds: 0 4px 8px rgba(139, 92, 246, 0.12), 0 8px 24px rgba(0, 0, 0, 0.08);

    /* ============ TIER COLOURS ============ */
    --tier-hero-top: #f3f4f6;
    --tier-hero-mid: #e5e7eb;
    --tier-page-bg: #f9fafb;
    --tier-pill-bg: rgba(255, 255, 255, 0.08);
    --tier-pill-text: var(--text-muted);
    --tier-text: #4b5563;
    --tier-text-sub: rgba(75, 85, 99, 0.7);
    --tier-meta-bg: rgba(255, 255, 255, 0.6);
    --tier-meta-text: #6b7280;
    --tier-glow: rgba(139, 92, 246, 0.1);
    --tier-hero-gradient: linear-gradient(180deg, #f3f4f6 0%, #e5e7eb 70%, var(--bg-home) 100%);
    --tier-hero-before: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 50%);

    /* ============ SEMANTIC ACCENTS ============ */
    --green-live: #22c55e;
    --red-alert: #ef4444;
    --accent-gold: #fbbf24;

    --amber: #f5a623;
    --bg-amber: rgba(245, 166, 35, 0.12);
    --border-amber: rgba(245, 166, 35, 0.35);

    /* ============ ELEVATED CARDS (hero panels, feature cards) ============ */
    /* Subtle purple-tinged card — impressive but airy in light mode */
    --bg-elevated-card:
        radial-gradient(circle at 30% 20%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.06) 0%, transparent 50%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.92) 100%);
    --border-elevated-card: rgba(139, 92, 246, 0.25);
    --elevated-card-glow: rgba(139, 92, 246, 0.15);
    --text-on-elevated: var(--text-primary);
    --text-on-elevated-secondary: var(--text-secondary);
    --text-on-elevated-muted: var(--text-muted);

    /* Subtle button sitting ON an elevated card */
    --bg-btn-on-elevated: rgba(139, 92, 246, 0.06);
    --border-btn-on-elevated: rgba(139, 92, 246, 0.2);
    --bg-btn-on-elevated-hover: rgba(139, 92, 246, 0.12);
}


/* ================================
   DARK THEME
   ================================ */
[data-theme="dark"] {
    /* ============ HEADER GRADIENT ============ */
    --header-gradient: radial-gradient(circle at 30% 20%, #667eea 0%, transparent 50%), radial-gradient(circle at 70% 80%, #764ba2 0%, #1a1625 60%);

    /* ============ GRADIENTS (navy base instead of black) ============ */
    --primary-gradient: 
        radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(167, 139, 250, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, #1e2235 0%, #2a2f45 100%);

    --purple-gradient: 
        radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.5) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.5) 0%, transparent 50%),
        rgba(26, 26, 46, 0.95);

    --orange-gradient: 
        radial-gradient(circle at 25% 75%, rgba(249, 115, 22, 0.5) 0%, transparent 50%),
        radial-gradient(circle at 75% 25%, rgba(234, 88, 12, 0.5) 0%, transparent 50%),
        rgba(26, 26, 46, 0.95);

    --green-gradient: 
        radial-gradient(circle at 25% 75%, rgba(16, 185, 129, 0.5) 0%, transparent 50%),
        radial-gradient(circle at 75% 25%, rgba(5, 150, 105, 0.5) 0%, transparent 50%),
        rgba(26, 26, 46, 0.95);

    --pink-gradient: 
        radial-gradient(circle at 25% 75%, rgba(236, 72, 153, 0.5) 0%, transparent 50%),
        radial-gradient(circle at 75% 25%, rgba(219, 39, 119, 0.5) 0%, transparent 50%),
        rgba(26, 26, 46, 0.95);

    --blue-gradient: 
        radial-gradient(circle at 25% 75%, rgba(59, 130, 246, 0.5) 0%, transparent 50%),
        radial-gradient(circle at 75% 25%, rgba(37, 99, 235, 0.5) 0%, transparent 50%),
        rgba(26, 26, 46, 0.95);

    --yellow-gradient:
        radial-gradient(circle at 20% 80%, rgba(251, 191, 36, 0.5) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.5) 0%, transparent 50%),
        rgba(26, 26, 46, 0.95);

    /* ============ PAGE BACKGROUNDS ============ */
    --bg-home-page:
        radial-gradient(circle at 30% 70%, rgba(139, 92, 246, 0.12) 0%, transparent 60%),
        radial-gradient(circle at 70% 30%, rgba(167, 139, 250, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, #1a1a2e 0%, #16162a 100%);
    --bg-home: #1a1a2e;

    /* ============ SURFACE BACKGROUNDS ============ */
    --bg-white: rgba(30, 35, 50, 0.98);
    --bg-card: rgba(30, 35, 50, 0.98);
    --bg-card-elevated: rgba(35, 40, 58, 0.98);
    --bg-card-home: linear-gradient(180deg, rgba(30, 35, 50, 0.98) 0%, rgba(35, 40, 58, 0.98) 100%);
    --bg-section: rgba(40, 45, 65, 0.9);
    --bg-muted: rgba(50, 55, 75, 0.6);
    --bg-input: rgba(40, 45, 65, 0.9);
    --bg-option: rgba(40, 45, 65, 1);
    --bg-option-hover: rgba(50, 55, 75, 1);
    --bg-glass: rgba(255, 255, 255, 0.05);
    --bg-recent-finds: linear-gradient(135deg, rgba(30, 35, 50, 0.98) 0%, rgba(35, 40, 58, 0.98) 100%);

    /* ============ OVERLAY BACKGROUNDS ============ */
    --bg-modal: rgba(30, 35, 50, 0.98);
    --bg-overlay: rgba(16, 16, 32, 0.95);
    --bg-onboarding: rgba(26, 26, 46, 0.98);
    --modal-backdrop: rgba(16, 16, 32, 0.9);

    /* ============ ACCENT BACKGROUNDS ============ */
    --bg-purple: rgba(139, 92, 246, 0.15);
    --bg-orange: rgba(249, 115, 22, 0.15);
    --bg-green: rgba(16, 185, 129, 0.15);
    --bg-red: rgba(239, 68, 68, 0.15);
    --bg-blue: rgba(59, 130, 246, 0.15);
    --bg-gold: rgba(255, 215, 0, 0.15);
    --bg-grey: rgba(156, 163, 175, 0.15);

    /* Hover variants */
    --bg-green-hover: rgba(16, 185, 129, 0.15);
    --bg-gold-hover: rgba(255, 215, 0, 0.15);
    --bg-orange-hover: rgba(249, 115, 22, 0.15);
    --bg-red-hover: rgba(239, 68, 68, 0.15);
    --bg-grey-hover: rgba(156, 163, 175, 0.15);

    /* ============ TEXT COLORS ============ */
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.75);
    --text-muted: rgba(255, 255, 255, 0.5);
    --text-white: rgba(255, 255, 255, 0.95);
    --text-purple: rgba(189, 165, 255, 1);
    --text-link: rgba(167, 139, 250, 1);

    /* ============ BORDERS ============ */
    --border-light: rgba(255, 255, 255, 0.1);
    --border-medium: rgba(255, 255, 255, 0.15);
    --border-purple: rgba(139, 92, 246, 0.5);
    --border-orange: rgba(249, 115, 22, 0.5);
    --border-green: rgba(16, 185, 129, 0.4);
    --border-red: rgba(239, 68, 68, 0.4);
    --border-blue: rgba(59, 130, 246, 0.4);
    --border-gold: rgba(251, 191, 36, 0.4);
    --border-recent-finds: rgba(139, 92, 246, 0.15);
    --border-status-currently: rgba(249, 115, 22, 0.5);
    --divider-color: rgba(255, 255, 255, 0.1);
    --modal-line: rgba(255, 255, 255, 0.1);

    /* ============ HOVER STATES ============ */
    --hover-subtle: rgba(139, 92, 246, 0.1);
    --hover-purple: rgba(139, 92, 246, 0.2);
    --hover-card: rgba(255, 255, 255, 0.05);

    /* ============ STATUS BACKGROUNDS ============ */
    --status-always-tap-cask-bg: rgba(255, 215, 0, 0.15);
    --status-always-bottle-can-bg: rgba(16, 185, 129, 0.15);
    --status-currently-bg: rgba(249, 115, 22, 0.8);
    --status-not-currently-bg: rgba(239, 68, 68, 0.15);
    --status-unknown-bg: rgba(156, 163, 175, 0.15);

    /* ============ SHADOWS ============ */
    --shadow-xs: 0 2px 4px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.7);
    --shadow-hero-title: 0 2px 4px rgba(0, 0, 0, 0.7);
    --shadow-card-home: 0 4px 8px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-purple: rgba(139, 92, 246, 0.25);
    --shadow-recent-finds: 0 4px 8px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);

/* ============ SEMANTIC SHORTHAND (used by some components) ============ */
    --dark-bg-card: rgba(40, 45, 65, 0.95);
    --dark-bg-elevated: rgba(50, 55, 75, 0.95);
    --dark-bg-section: rgba(30, 35, 50, 0.98);

    /* ============ ELEVATED CARDS (hero panels, feature cards) ============ */
    /* Deep navy with purple radials — keeps the impressive dark-mode feel */
    --bg-elevated-card: linear-gradient(135deg, rgba(26, 18, 48, 0.8) 0%, rgba(18, 16, 42, 0.8) 50%, rgba(14, 21, 32, 0.8) 100%);
    --border-elevated-card: rgba(139, 92, 246, 0.3);
    --elevated-card-glow: rgba(139, 92, 246, 0.3);
    --text-on-elevated: rgba(255, 255, 255, 0.95);
    --text-on-elevated-secondary: rgba(255, 255, 255, 0.75);
    --text-on-elevated-muted: rgba(255, 255, 255, 0.5);

    /* Subtle button sitting ON an elevated card */
    --bg-btn-on-elevated: rgba(255, 255, 255, 0.04);
    --border-btn-on-elevated: rgba(255, 255, 255, 0.08);
    --bg-btn-on-elevated-hover: rgba(255, 255, 255, 0.08);
}