/**
 * Design System - Wishlist Application
 * Modern color palette, design tokens, and CSS custom properties
 */

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */

:root {
  /* ========== Color Palette ========== */

  /* Primary Colors - Premium Blue Palette */
  --color-primary: #1055C9;        /* Bright Vibrant Blue - Primary brand color */
  --color-primary-dark: #0d4399;   /* Darker blue for hover states */
  --color-primary-light: #3d75d9;  /* Lighter blue for backgrounds */

  --color-secondary: #05339C;      /* Deep Navy Blue - Secondary, text, depth */
  --color-secondary-dark: #042870; /* Darker navy for emphasis */
  --color-secondary-light: #0742b8; /* Lighter navy */

  /* Accent Colors */
  --color-accent-teal: #41A67E;    /* Muted Teal Green - Success, features */
  --color-accent-teal-dark: #35885f; /* Darker teal */
  --color-accent-teal-light: #5cb891; /* Lighter teal */

  --color-accent-gold: #E5C95F;    /* Warm Golden Yellow - CTAs, highlights */
  --color-accent-gold-dark: #d4b53e; /* Darker gold */
  --color-accent-gold-light: #edd883; /* Lighter gold */

  /* Semantic Colors */
  --color-success: #41A67E;        /* Teal green */
  --color-success-dark: #35885f;
  --color-success-light: #5cb891;

  --color-warning: #E5C95F;        /* Golden yellow */
  --color-warning-dark: #d4b53e;
  --color-warning-light: #edd883;

  --color-danger: #ee5a6f;         /* Keep existing red for errors */
  --color-danger-dark: #d63f54;
  --color-danger-light: #f17a89;

  --color-info: #1055C9;           /* Primary blue */
  --color-info-dark: #0d4399;
  --color-info-light: #3d75d9;

  /* Neutral Colors - Light Theme */
  --color-gray-50: #f8f9fa;
  --color-gray-100: #f1f3f5;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #868e96;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;

  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f7fa;
  --bg-tertiary: #e8ecf0;

  /* Text Colors */
  --text-primary: #05339C;         /* Navy blue for primary text */
  --text-secondary: #0742b8;       /* Lighter navy for secondary text */
  --text-tertiary: #95a5a6;        /* Keep gray for tertiary */
  --text-inverse: #ffffff;

  /* Border Colors */
  --border-color: #e1e8ed;
  --border-color-dark: #cbd5e0;

  /* ========== Gradients ========== */
  --gradient-primary: linear-gradient(135deg, #05339C 0%, #1055C9 100%);  /* Navy to Bright Blue */
  --gradient-primary-hover: linear-gradient(135deg, #042870 0%, #0d4399 100%);
  --gradient-success: linear-gradient(135deg, #41A67E 0%, #5cb891 100%);  /* Teal gradient */
  --gradient-danger: linear-gradient(135deg, #ee5a6f 0%, #ff9f43 100%);
  --gradient-info: linear-gradient(135deg, #1055C9 0%, #3d75d9 100%);     /* Blue gradient */
  --gradient-background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf0 100%);
  --gradient-hero: linear-gradient(135deg, #05339C 0%, #1055C9 50%, #3d75d9 100%);  /* Hero section gradient */
  --gradient-cta: linear-gradient(135deg, #E5C95F 0%, #edd883 100%);      /* Golden CTA gradient */

  /* Text color that pairs with the gold CTA gradient. Theme-independent —
     the gradient is always gold regardless of light/dark mode, so the text
     on top of it must NOT track --color-secondary (which lightens in dark
     mode and produced light-blue-on-gold = unreadable). Same root cause as
     the --text-inverse fix in 0.3.6. */
  --color-on-gold: #05339C;

  /* ========== Shadows ========== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Card shadows with color */
  --shadow-card: 0 4px 6px -1px rgba(16, 85, 201, 0.1), 0 2px 4px -1px rgba(16, 85, 201, 0.06);
  --shadow-card-hover: 0 20px 25px -5px rgba(16, 85, 201, 0.15), 0 10px 10px -5px rgba(16, 85, 201, 0.04);
  --shadow-gold: 0 4px 12px rgba(229, 201, 95, 0.3);  /* Golden glow for CTAs */

  /* ========== Spacing (8px grid) ========== */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ========== Border Radius ========== */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.5rem;   /* 24px */
  --radius-full: 9999px;  /* Pill shape */

  /* ========== Transitions ========== */
  --transition-fast: 150ms ease-out;
  --transition-base: 300ms ease-out;
  --transition-slow: 500ms ease-out;

  /* ========== Typography ========== */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Poppins', var(--font-sans);
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

  /* Font Sizes */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* ========== Z-Index Scale ========== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ========== Container & Layout ========== */
  --container-max-width: 1200px;
  --container-padding: var(--space-6);
  --grid-gap: var(--space-6);
}

/* ============================================
   DARK THEME OVERRIDES
   ============================================ */

[data-theme="dark"],
.theme-dark {
  /* Dark Background Colors */
  --bg-primary: #1a1d29;
  --bg-secondary: #252837;
  --bg-tertiary: #2f3349;

  /* Dark Text Colors — bumped to pure white / brighter gray for stronger
     contrast against the dark surfaces. Previous #e8eaed/#a8abb7 read as
     "dim" against the subtle blue glow on cards. */
  --text-primary: #ffffff;
  --text-secondary: #d1d5db;
  --text-tertiary: #9ca3af;
  /* --text-inverse stays #ffffff (same as light mode) — it's used as the
     text color on top of brand-color gradients (hero banners, primary
     buttons) which do NOT invert with theme; flipping it to dark made
     banner headings read as navy-on-blue. */
  --text-inverse: #ffffff;

  /* Dark Border Colors */
  --border-color: #3a3f58;
  --border-color-dark: #2f3349;

  /* Brand colors — light-mode values stay deep navy / bright blue (used as
     text color in many templates). On the dark surface (#1a1d29) those would
     render as navy-on-charcoal and read as "black text on dark background".
     Lighten/brighten them in dark mode so the same `color: var(--color-...)`
     declarations remain legible without touching template markup. */
  --color-primary: #4d8de0;        /* was #1055C9 */
  --color-primary-dark: #1055C9;
  --color-primary-light: #7aaeec;
  --color-secondary: #a8b4d3;      /* was #05339C — used as text color */
  --color-secondary-dark: #7c89ab;

  /* "Info" is used for inline icons/links — bump for icon-on-dark contrast. */
  --color-info: #5fa3ff;

  /* Adjusted shadows for dark mode (glow instead of drop) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);

  /* Glow effects for dark mode */
  --shadow-card: 0 0 0 1px rgba(102, 126, 234, 0.2), 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 0 0 1px rgba(102, 126, 234, 0.4), 0 20px 25px -5px rgba(102, 126, 234, 0.2);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Spacing Utilities */
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

/* Text Utilities */
.text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Shadow Utilities */
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-card-hover { box-shadow: var(--shadow-card-hover); }

/* Transition Utilities */
.transition-fast { transition: all var(--transition-fast); }
.transition-base { transition: all var(--transition-base); }
.transition-slow { transition: all var(--transition-slow); }

/* Gradient Backgrounds */
.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-success { background: var(--gradient-success); }
.bg-gradient-danger { background: var(--gradient-danger); }
.bg-gradient-info { background: var(--gradient-info); }

/* Backdrop Blur (Glassmorphism) */
.backdrop-blur {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .backdrop-blur,
.theme-dark .backdrop-blur {
  background-color: rgba(37, 40, 55, 0.7);
}