/* ==========================================================================
   CSS Custom Properties (Theme Variables)
   ========================================================================== 
   To change the theme, modify these variables.
   All colors, spacing, typography, and component values derive from here.
*/

:root {
    /* -------------------------
       Color Palette - Primary (derived from logo teal-blue ~#4AABBF)
       ------------------------- */
    --color-primary-50: #e6f6fa;
    --color-primary-100: #b8e6f0;
    --color-primary-200: #8ad6e6;
    --color-primary-300: #5cc5db;
    --color-primary-400: #3db8d1;
    --color-primary-500: #1ea8c4;
    --color-primary-600: #1a96b0;
    --color-primary-700: #157d94;
    --color-primary-800: #116578;
    --color-primary-900: #0a4150;
    /* -------------------------
       Color Palette - Accent/Wine (derived from logo maroon ~#802040)
       ------------------------- */
    --color-accent-50: #fce8ee;
    --color-accent-100: #f5b8c8;
    --color-accent-200: #ee88a2;
    --color-accent-300: #d45a7c;
    --color-accent-400: #b83a5e;
    --color-accent-500: #982042;
    --color-accent-600: #802040;
    --color-accent-700: #661a34;
    --color-accent-800: #4d1427;
    --color-accent-900: #340d1b;
    /* -------------------------
       Color Palette - Success/Green
       ------------------------- */
    --color-success-50: #e8f5e9;
    --color-success-100: #c8e6c9;
    --color-success-200: #a5d6a7;
    --color-success-300: #81c784;
    --color-success-400: #66bb6a;
    --color-success-500: #4caf50;
    --color-success-600: #43a047;
    --color-success-700: #388e3c;
    --color-success-800: #2e7d32;
    --color-success-900: #1b5e20;
    /* -------------------------
       Neutral Colors
       ------------------------- */
    --color-neutral-0: #ffffff;
    --color-neutral-50: #fafafa;
    --color-neutral-100: #f5f5f5;
    --color-neutral-200: #eeeeee;
    --color-neutral-300: #e0e0e0;
    --color-neutral-400: #bdbdbd;
    --color-neutral-500: #9e9e9e;
    --color-neutral-600: #757575;
    --color-neutral-700: #616161;
    --color-neutral-800: #424242;
    --color-neutral-900: #212121;
    /* -------------------------
       Semantic Colors
       ------------------------- */
    --color-background: var(--color-neutral-0);
    --color-surface: var(--color-neutral-0);
    --color-text-primary: var(--color-neutral-900);
    --color-text-secondary: var(--color-neutral-600);
    --color-text-muted: var(--color-neutral-500);
    --color-text-inverse: var(--color-neutral-0);
    --color-border: var(--color-neutral-300);
    --color-border-light: var(--color-neutral-200);
    --color-link: var(--color-primary-700);
    --color-link-hover: var(--color-primary-800);
    /* -------------------------
       Typography
       ------------------------- */
    --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-heading: var(--font-family-base);
    --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-base: 1rem; /* 16px */
    --font-size-md: 1.125rem; /* 18px */
    --font-size-lg: 1.25rem; /* 20px */
    --font-size-xl: 1.5rem; /* 24px */
    --font-size-2xl: 2rem; /* 32px */
    --font-size-3xl: 2.5rem; /* 40px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.15;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.75;
    /* -------------------------
       Spacing Scale
       ------------------------- */
    --spacing-0: 0;
    --spacing-1: 0.25rem; /* 4px */
    --spacing-2: 0.5rem; /* 8px */
    --spacing-3: 0.75rem; /* 12px */
    --spacing-4: 1rem; /* 16px */
    --spacing-5: 1.25rem; /* 20px */
    --spacing-6: 1.5rem; /* 24px */
    --spacing-8: 2rem; /* 32px */
    --spacing-10: 2.5rem; /* 40px */
    --spacing-12: 3rem; /* 48px */
    --spacing-16: 4rem; /* 64px */
    /* -------------------------
       Border Radius
       ------------------------- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    /* -------------------------
       Shadows
       ------------------------- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.12);
    /* -------------------------
       Transitions
       ------------------------- */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    /* -------------------------
       Z-Index Scale
       ------------------------- */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    /* -------------------------
       Component: Card
       ------------------------- */
    --card-bg: var(--color-surface);
    --card-bg-gradient: linear-gradient(180deg, var(--color-primary-50) 0%, var(--color-primary-200) 100%);
    --card-border: 2px solid var(--color-primary-400);
    --card-radius: var(--radius-xl);
    --card-shadow: var(--shadow-md);
    --card-padding: var(--spacing-8);
    /* -------------------------
       Component: Table
       ------------------------- */
    --table-header-bg: linear-gradient(180deg, var(--color-primary-200) 0%, var(--color-primary-400) 100%);
    --table-header-text: var(--color-text-inverse);
    --table-header-border: 2px solid var(--color-primary-400);
    --table-stripe-bg: var(--color-neutral-50);
    /* -------------------------
       Component: Tag/Badge
       ------------------------- */
    --tag-radius: var(--radius-full);
    --tag-padding: var(--spacing-2) var(--spacing-3);
    --tag-font-size: var(--font-size-sm);
    --tag-font-weight: var(--font-weight-semibold);
    /* -------------------------
       Component: Nutrition Label
       ------------------------- */
    --nutrition-border: 2px solid var(--color-neutral-900);
    --nutrition-bg: var(--color-surface);
    --nutrition-max-width: 400px;
    /* -------------------------
       Component: Tooltip
       ------------------------- */
    --tooltip-bg: var(--color-surface);
    --tooltip-border: 1px solid var(--color-border);
    --tooltip-shadow: var(--shadow-lg);
    /* -------------------------
       Tag Color Palette (for dynamic tags)
       ------------------------- */
    --tag-color-1: #198754;
    --tag-color-2: #20c997;
    --tag-color-3: #17a2b8;
    --tag-color-4: #28a745;
    --tag-color-5: #1e7e34;
    --tag-color-6: #00796b;
    --tag-color-7: #009688;
    --tag-color-8: #4caf50;
    --tag-color-9: #388e3c;
    --tag-color-10: #8bc34a;
    --tag-color-11: #66bb6a;
    --tag-color-12: #43a047;
    --tag-color-13: #2e7d32;
    /* -------------------------
       Semantic Category Colors
       (single source of truth — change here to retheme all category indicators)
       ------------------------- */
    --color-category-favorite: #c0254d; /* Ruby / Crimson Red   */
    --color-category-reviews: #d97706; /* Gold / Amber         */
    --color-category-wishlist: #0ea5e9; /* Sky Blue             */
    --color-category-tried: #10b981; /* Emerald / Mint Green */
    --color-category-user-added: #7c3aed; /* Amethyst / Violet    */
    /* Light variants for backgrounds and hover states */
    --color-category-favorite-light: rgba(192,37,77,0.08);
    --color-category-reviews-light: rgba(217,119,6,0.08);
    --color-category-wishlist-light: rgba(14,165,233,0.08);
    --color-category-tried-light: rgba(16,185,129,0.08);
    /* Subtle/translucent variants — defined here so no hex values appear elsewhere */
    --color-category-user-added-bg: rgba(124,58,237,0.04);
    --color-category-user-added-shadow: rgba(124,58,237,0.08);
    --color-category-user-added-border: rgba(124,58,237,0.45);
    /* -------------------------
       Alert & Status Colors
       (warning, error, info — single source of truth)
       ------------------------- */
    --color-warning: #fef3c7; /* Yellow / Amber       */
    --color-warning-light: #fff3cd; /* Light yellow bg      */
    --color-warning-border: #f0c040; /* Warning border       */
    --color-warning-text: #6b4c00; /* Dark yellow text     */

    --color-error: #ffe4e6; /* Red / Danger         */
    --color-error-light: #f8d7da; /* Light red bg         */
    --color-error-border: #f5c6cb; /* Error border         */
    --color-error-text: #721c24; /* Dark red text        */

    --color-info: #17a2b8; /* Cyan / Info          */
    --color-info-light: #d1ecf1; /* Light cyan bg        */
    --color-info-border: #bee5eb; /* Info border          */
    --color-info-text: #0c5460; /* Dark cyan text       */

    --color-success-light: #d4edda; /* Light green bg       */
    --color-success-border: #c3e6cb; /* Success border       */
    --color-success-text: #155724; /* Dark green text      */
    /* -------------------------
       Overlay Colors
       (dark and white overlays for depth and modals)
       ------------------------- */
    --color-overlay-dark-light: rgba(0, 0, 0, 0.2);
    --color-overlay-dark-medium: rgba(0, 0, 0, 0.32);
    --color-overlay-dark-strong: rgba(0, 0, 0, 0.55);
    --color-overlay-white-light: rgba(255, 255, 255, 0.12);
    --color-overlay-white-medium: rgba(255, 255, 255, 0.2);
    --color-overlay-white-strong: rgba(255, 255, 255, 0.9);
    /* -------------------------
       Shadow Color Variants
       (for colored shadows matching category colors)
       ------------------------- */
    --color-shadow-primary: rgba(26, 150, 176, 0.08);
    --color-shadow-favorite: rgba(192, 37, 77, 0.1);
    --color-shadow-reviews: rgba(217, 119, 6, 0.1);
    /* -------------------------
       Badge Colors
       ------------------------- */
    --color-badge-firstreview: #38bdf8; /* Sky blue — first review badge */
    --color-badge-tenreviews: #f59e0b; /* Gold — ten reviews badge */
    --color-badge-hundredreviews: #7c3aed; /* Purple — hundred reviews badge */
    --color-badge-betatester: #0d9488; /* Teal — beta tester badge */
    --color-badge-siteowner: #b45309; /* Amber — site owner badge */
}

/* ==========================================================================
   Category Icon Color Utilities
   ========================================================================== */
.icon-category--favorite   { color: var(--color-category-favorite);   }
.icon-category--reviews    { color: var(--color-category-reviews);    }
.icon-category--wishlist   { color: var(--color-category-wishlist);   }
.icon-category--tried      { color: var(--color-category-tried);      }
.icon-category--user-added { color: var(--color-category-user-added); }

/* ==========================================================================
   Locked / Auth-Required Action Wrapper
   Wrap disabled buttons in this span so the title tooltip fires even when
   the inner button suppresses pointer-events (browser behaviour on :disabled).
   ========================================================================== */
.action-locked-wrap {
    cursor: not-allowed;
    display: inline-flex;
    align-items: center;
}
.action-locked-wrap > * {
    pointer-events: none;   /* inner element yields hover to the wrapper */
}
/* Clearly gray — not just dimmed */
.action-locked-wrap button,
.action-locked-wrap .btn-ghost {
    color: var(--color-neutral-400) !important;
    border-color: var(--color-neutral-300) !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1;
}

/* ==========================================================================
   Dark Theme Override (optional - enable by adding class="dark" to <html>)
   ========================================================================== */
.dark {
    /* ── Semantic Colors ─────────────────────────────────────────────────── */
    --color-background: var(--color-neutral-900);
    --color-surface: var(--color-neutral-800);
    --color-text-primary: var(--color-neutral-100);
    --color-text-secondary: var(--color-neutral-400);
    --color-text-muted: var(--color-neutral-500);
    --color-text-inverse: var(--color-neutral-900);
    --color-border: var(--color-neutral-700);
    --color-border-light: var(--color-neutral-800);
    --color-link: var(--color-primary-400);
    --color-link-hover: var(--color-primary-300);

    /* ── Component Defaults ──────────────────────────────────────────────── */
    --card-bg: var(--color-surface);
    --card-bg-gradient: linear-gradient(180deg, var(--color-neutral-800) 0%, var(--color-neutral-700) 100%);
    --card-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    --card-border: 1px solid var(--color-neutral-700);

    --nutrition-bg: var(--color-neutral-800);
    --nutrition-border: 2px solid var(--color-neutral-700);

    --tooltip-bg: var(--color-neutral-800);
    --tooltip-border: 1px solid var(--color-neutral-700);

    /* ── Overlay Colors (inverted for dark mode) ─────────────────────────── */
    --color-overlay-dark-light:      rgba(255, 255, 255, 0.1);
    --color-overlay-dark-medium:     rgba(255, 255, 255, 0.15);
    --color-overlay-dark-strong:     rgba(255, 255, 255, 0.2);
    --color-overlay-white-light:     rgba(0, 0, 0, 0.3);
    --color-overlay-white-medium:    rgba(0, 0, 0, 0.5);
    --color-overlay-white-strong:    rgba(0, 0, 0, 0.7);

    /* ── Shadow Colors (adjusted for dark backgrounds) ────────────────────── */
    --color-shadow-primary:          rgba(255, 255, 255, 0.1);
    --color-shadow-favorite:         rgba(192, 37, 77, 0.2);
    --color-shadow-reviews:          rgba(217, 119, 6, 0.2);

    /* ── Semantic Category Light Variants (darker for dark mode) ─────────── */
    --color-category-favorite-light: rgba(192, 37, 77, 0.15);
    --color-category-reviews-light:  rgba(217, 119, 6, 0.15);
    --color-category-wishlist-light: rgba(14, 165, 233, 0.15);
    --color-category-tried-light:    rgba(16, 185, 129, 0.15);
    --color-category-user-added-bg:  rgba(124, 58, 237, 0.1);
    --color-category-user-added-shadow: rgba(124, 58, 237, 0.15);
    --color-category-user-added-border: rgba(124, 58, 237, 0.3);

    /* ── Alert Colors (adjusted for dark backgrounds) ──────────────────────── */
    --color-warning: #fbbf24;           /* Lighter amber for dark mode */
    --color-warning-light: rgba(251, 191, 36, 0.1);
    --color-warning-border: rgba(251, 191, 36, 0.3);
    --color-warning-text: #fbbf24;

    --color-error: #f87171;             /* Lighter red for dark mode */
    --color-error-light: rgba(248, 113, 113, 0.1);
    --color-error-border: rgba(248, 113, 113, 0.3);
    --color-error-text: #f87171;

    --color-info: #38bdf8;              /* Lighter cyan for dark mode */
    --color-info-light: rgba(56, 189, 248, 0.1);
    --color-info-border: rgba(56, 189, 248, 0.3);
    --color-info-text: #38bdf8;

    --color-success-light: rgba(16, 185, 129, 0.1);
    --color-success-border: rgba(16, 185, 129, 0.3);
    --color-success-text: #6ee7b7;      /* Lighter green text */
}