/* Eternal Funding - Yellow Ethereal Theme */
/* Central branding and color configuration */

:root {
  /* Primary Yellow Palette */
  --eternal-primary: #fbbf24;        /* Amber 400 - Main brand color */
  --eternal-primary-dark: #f59e0b;   /* Amber 500 - Darker variant */
  --eternal-primary-light: #fcd34d;  /* Amber 300 - Lighter variant */
  --eternal-accent: #fef3c7;         /* Amber 100 - Very light accent */

  /* Secondary Colors for Ethereal Effect */
  --eternal-secondary: #d97706;      /* Amber 600 - Deep amber */
  --eternal-tertiary: #92400e;       /* Amber 700 - Dark amber */

  /* Neutral Colors with Yellow Tints */
  --eternal-white: #ffffff;
  --eternal-black: #000000;
  --eternal-gray-50: #fefefe;
  --eternal-gray-100: #fdfdfb;
  --eternal-gray-200: #fafaf8;
  --eternal-gray-300: #f5f5f2;
  --eternal-gray-400: #e5e5e1;
  --eternal-gray-500: #d4d4cc;
  --eternal-gray-600: #a3a39b;
  --eternal-gray-700: #73736a;
  --eternal-gray-800: #525249;
  --eternal-gray-900: #262621;

  /* Text Colors */
  --eternal-text-primary: #262621;   /* Very dark gray */
  --eternal-text-secondary: #525249; /* Dark gray */
  --eternal-text-muted: #a3a39b;     /* Medium gray */

  /* Background Colors */
  --eternal-bg-primary: #000000;     /* Pure black for hero */
  --eternal-bg-secondary: #262621;   /* Dark gray */
  --eternal-bg-light: #fefefe;       /* Off-white */

  /* Gradient Definitions */
  --eternal-gradient-primary: linear-gradient(135deg, var(--eternal-primary), var(--eternal-primary-dark));
  --eternal-gradient-secondary: linear-gradient(135deg, var(--eternal-secondary), var(--eternal-tertiary));
  --eternal-gradient-text: linear-gradient(45deg, var(--eternal-white), var(--eternal-primary-light));
  --eternal-gradient-accent: linear-gradient(135deg, var(--eternal-accent), var(--eternal-primary-light));

  /* Shadow Colors */
  --eternal-shadow-primary: rgba(251, 191, 36, 0.25);
  --eternal-shadow-secondary: rgba(245, 158, 11, 0.3);
  --eternal-shadow-tertiary: rgba(217, 119, 6, 0.4);

  /* Border Colors */
  --eternal-border-light: rgba(255, 255, 255, 0.1);
  --eternal-border-medium: rgba(255, 255, 255, 0.2);
  --eternal-border-dark: rgba(251, 191, 36, 0.1);

  /* Glass Effect Colors */
  --eternal-glass-bg: rgba(0, 0, 0, 0.2);
  --eternal-glass-border: rgba(255, 255, 255, 0.1);
  --eternal-glass-bg-light: rgba(255, 255, 255, 0.1);
  --eternal-glass-border-light: rgba(255, 255, 255, 0.2);

  /* Card Backgrounds */
  --eternal-card-bg: rgba(255, 255, 255, 0.95);
  --eternal-card-bg-hover: rgba(255, 255, 255, 1);
  --eternal-card-border: rgba(0, 0, 0, 0.1);

  /* Typography */
  --eternal-font-family: 'Inter', sans-serif;
  --eternal-font-weight-light: 400;
  --eternal-font-weight-medium: 500;
  --eternal-font-weight-semibold: 600;
  --eternal-font-weight-bold: 700;
  --eternal-font-weight-extrabold: 800;

  /* Spacing */
  --eternal-spacing-xs: 0.25rem;
  --eternal-spacing-sm: 0.5rem;
  --eternal-spacing-md: 1rem;
  --eternal-spacing-lg: 1.5rem;
  --eternal-spacing-xl: 2rem;
  --eternal-spacing-2xl: 3rem;

  /* Border Radius */
  --eternal-radius-sm: 0.25rem;
  --eternal-radius-md: 0.5rem;
  --eternal-radius-lg: 0.75rem;
  --eternal-radius-xl: 1rem;
  --eternal-radius-2xl: 1.5rem;

  /* Transitions */
  --eternal-transition-fast: 0.2s ease;
  --eternal-transition-normal: 0.3s ease;
  --eternal-transition-slow: 0.5s ease;

  /* Effects */
  --eternal-blur-sm: blur(10px);
  --eternal-blur-md: blur(15px);
  --eternal-blur-lg: blur(20px);

  /* Brand Name */
  --eternal-brand-name: "Eternal Funding";
  --eternal-tagline: "Where Trading Meets Eternity";
}

/* Utility Classes for Easy Updates */
.eternal-text-primary { color: var(--eternal-text-primary); }
.eternal-text-secondary { color: var(--eternal-text-secondary); }
.eternal-text-muted { color: var(--eternal-text-muted); }

.eternal-bg-primary { background-color: var(--eternal-primary); }
.eternal-bg-secondary { background-color: var(--eternal-secondary); }
.eternal-bg-accent { background-color: var(--eternal-accent); }

.eternal-gradient-primary { background: var(--eternal-gradient-primary); }
.eternal-gradient-secondary { background: var(--eternal-gradient-secondary); }
.eternal-gradient-text {
  background: var(--eternal-gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Responsive breakpoints for eternal theme */
@media (max-width: 768px) {
  :root {
    --eternal-spacing-xl: 1.5rem;
    --eternal-spacing-2xl: 2rem;
  }
}