/* Custom CSS Variables - Manifest Destiny Brand */
@layer base {
  :root {
    /* Sky Blue - Primary Action Color (from SVG eagle circle) */
    --color-skyblue-50: #e6f7fc;
    --color-skyblue-100: #cceff9;
    --color-skyblue-200: #99dff3;
    --color-skyblue-300: #66cfed;
    --color-skyblue-400: #33bfe7;
    --color-skyblue-500: #00B4D8;
    --color-skyblue-600: #0090ad;
    --color-skyblue-700: #006c82;
    --color-skyblue-800: #004856;
    --color-skyblue-900: #00242b;

    /* Ocean Blue - Primary Dark/Sophisticated (from SVG crescent) */
    --color-ocean-50: #e6f3f7;
    --color-ocean-100: #cce7ef;
    --color-ocean-200: #99cfdf;
    --color-ocean-300: #66b7cf;
    --color-ocean-400: #339fbf;
    --color-ocean-500: #0096C7;
    --color-ocean-600: #00789f;
    --color-ocean-700: #005a77;
    --color-ocean-800: #003c4f;
    --color-ocean-900: #001e28;

    /* Azure - Light Blue Variant (from SVG shield gradient) */
    --color-azure-50: #edfafc;
    --color-azure-100: #dbf5f9;
    --color-azure-200: #b7ebf3;
    --color-azure-300: #93e1ed;
    --color-azure-400: #6fd7e7;
    --color-azure-500: #48CAE4;
    --color-azure-600: #3aa2b6;
    --color-azure-700: #2b7989;
    --color-azure-800: #1d515b;
    --color-azure-900: #0e282e;

    /* Champion Gold - Accent/Winning/Luxury */
    --color-champion-50: #fefbf3;
    --color-champion-100: #fdf7e7;
    --color-champion-200: #fbefcf;
    --color-champion-300: #f9e7b7;
    --color-champion-400: #f7df9f;
    --color-champion-500: #E8C547;
    --color-champion-600: #ba9d39;
    --color-champion-700: #8b762b;
    --color-champion-800: #5d4e1c;
    --color-champion-900: #2e270e;

    /* Coral - Error/Alerts/Patriotic Red (from SVG flag stripes) */
    --color-coral-50: #fef2f2;
    --color-coral-100: #fde5e5;
    --color-coral-200: #fbcbcb;
    --color-coral-300: #f9b1b1;
    --color-coral-400: #f79797;
    --color-coral-500: #EF5350;
    --color-coral-600: #bf4240;
    --color-coral-700: #8f3230;
    --color-coral-800: #5f2120;
    --color-coral-900: #2f1110;

    /* Pearl - Light Surfaces/Cards (from SVG eagle body) */
    --color-pearl-50: #FFFFFF;
    --color-pearl-100: #fafcfc;
    --color-pearl-200: #f5f9f9;
    --color-pearl-300: #f0f6f6;
    --color-pearl-400: #ebf3f3;
    --color-pearl-500: #E9F1F2;
    --color-pearl-600: #bac1c2;
    --color-pearl-700: #8c9192;
    --color-pearl-800: #5d6061;
    --color-pearl-900: #2f3031;

    /* Silver - Borders/Dividers (from SVG gray details) */
    --color-silver-50: #f9fafa;
    --color-silver-100: #f3f5f5;
    --color-silver-200: #e7ebeb;
    --color-silver-300: #dbe1e1;
    --color-silver-400: #cfd7d7;
    --color-silver-500: #D0D8DA;
    --color-silver-600: #a6adae;
    --color-silver-700: #7d8283;
    --color-silver-800: #535657;
    --color-silver-900: #2a2b2c;

    /* Charcoal - Dark Text/Outlines (from SVG outlines) */
    --color-charcoal-50: #f5f5f6;
    --color-charcoal-100: #ebecec;
    --color-charcoal-200: #d7d9d9;
    --color-charcoal-300: #c3c6c6;
    --color-charcoal-400: #afb3b3;
    --color-charcoal-500: #464A51;
    --color-charcoal-600: #383b41;
    --color-charcoal-700: #2a2c31;
    --color-charcoal-800: #1c1e20;
    --color-charcoal-900: #0e0f10;

    /* Gray Scale (for neutral UI elements) */
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;

    /* Dark Mode - Premium Dark Base */
    --color-dark-bg: #0F0F0F;
    --color-dark-surface: #1a1a1e;
    --color-dark-border: #2a2a2e;
    --color-dark-elevated: #242428;

    /* Surface Colors for Tailwind Integration */
    --color-surface-base: #ffffff;
    --color-surface-raised: #f9fafb;
    --color-surface-overlay: #ffffff;
    --color-surface-contrast: #E9F1F2;

    /* Text/Ink Colors for Tailwind Integration */
    --color-ink: #464A51;
    --color-ink-soft: #6b7280;
    --color-ink-muted: #9ca3af;

    /* Border Colors for Tailwind Integration */
    --color-border-base: #D0D8DA;
    --color-border-subtle: #E9F1F2;

    /* Map primary colors to Sky Blue for brand consistency */
    --color-primary-50: var(--color-skyblue-50);
    --color-primary-100: var(--color-skyblue-100);
    --color-primary-200: var(--color-skyblue-200);
    --color-primary-300: var(--color-skyblue-300);
    --color-primary-400: var(--color-skyblue-400);
    --color-primary-500: var(--color-skyblue-500);
    --color-primary-600: var(--color-skyblue-600);
    --color-primary-700: var(--color-skyblue-700);
    --color-primary-800: var(--color-skyblue-800);
    --color-primary-900: var(--color-skyblue-900);

    /* Brand Gradients */
    --gradient-patriot: linear-gradient(135deg, #00B4D8 0%, #0096C7 50%, #E8C547 100%);
    --gradient-sky: linear-gradient(135deg, #00B4D8 0%, #48CAE4 100%);
    --gradient-ocean: linear-gradient(135deg, #0096C7 0%, #00B4D8 100%);

    /* Semantic Colors for Lottery/Raffle Pages */
    --color-semantic-money: var(--color-azure-400);
    --color-semantic-jackpot: var(--color-champion-500);
    --color-semantic-prize: var(--color-champion-400);
    --color-semantic-tier3: var(--color-ocean-400);
    --color-semantic-tier4: var(--color-skyblue-400);
    --color-semantic-tier5: var(--color-champion-500);

    /* Wallet Banner */
    --color-wallet-banner-bg: var(--color-ocean-700);
  }

  /* Font loading */
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/InterVariable-2bf3d951bf9d6109437ea0874bbf12fb.woff2?vsn=d') format('woff2-variations');
  }

  @font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('/fonts/jetbrains-mono-variable-4e0581ae831b349f3f42c0f58d344122.woff2?vsn=d') format('woff2-variations');
  }
}

/* Typography Scale */
@layer components {
  .text-display-1 { @apply text-6xl font-extrabold leading-tight; }
  .text-display-2 { @apply text-5xl font-bold leading-tight; }
  .text-heading-1 { @apply text-4xl font-bold leading-tight; }
  .text-heading-2 { @apply text-3xl font-semibold leading-snug; }
  .text-heading-3 { @apply text-2xl font-semibold leading-snug; }
  .text-heading-4 { @apply text-xl font-semibold leading-snug; }
  .text-body-lg { @apply text-lg font-normal leading-relaxed; }
  .text-body { @apply text-base font-normal leading-relaxed; }
  .text-body-sm { @apply text-sm font-normal leading-normal; }
  .text-caption { @apply text-xs font-medium leading-tight; }
}

/* Loading Spinner */
@layer utilities {
  .loading-spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }
}

/* Custom Scrollbar */
@layer utilities {
  .custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-400 dark:bg-gray-600 rounded-full;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500 dark:bg-gray-500;
  }
}

/* Phoenix specific styles - Brand enhanced */
@layer components {
  /* Flash messages */
  .alert {
    @apply p-4 rounded-lg mb-4;
  }

  .alert-info {
    @apply bg-skyblue-50 text-skyblue-800 dark:bg-skyblue-900/20 dark:text-skyblue-200 border border-skyblue-200 dark:border-skyblue-700;
  }

  .alert-success {
    @apply bg-azure-50 text-azure-800 dark:bg-azure-900/20 dark:text-azure-200 border border-azure-200 dark:border-azure-700;
  }

  .alert-warning {
    @apply bg-champion-50 text-champion-800 dark:bg-champion-900/20 dark:text-champion-200 border border-champion-200 dark:border-champion-700;
  }

  .alert-error {
    @apply bg-coral-50 text-coral-800 dark:bg-coral-900/20 dark:text-coral-200 border border-coral-200 dark:border-coral-700;
  }

  /* Invalid feedback */
  .invalid-feedback {
    @apply text-sm text-coral-600 dark:text-coral-400 mt-1;
  }

  /* Form control states */
  .form-control.is-invalid {
    @apply border-coral-300 dark:border-coral-600 focus:border-coral-500 focus:ring-coral-500;
  }

  /* Brand Buttons */
  .btn-patriot {
    @apply bg-skyblue-500 hover:bg-skyblue-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors;
  }

  .btn-champion {
    @apply bg-champion-500 hover:bg-champion-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors;
  }

  .btn-gradient {
    @apply bg-gradient-patriot hover:opacity-90 text-white font-semibold py-2 px-4 rounded-lg transition-opacity;
  }

  /* Brand Cards */
  .card-patriot {
    @apply bg-white dark:bg-dark-surface border border-skyblue-200 dark:border-skyblue-800 rounded-xl shadow-sm;
  }

  .card-champion {
    @apply bg-white dark:bg-dark-surface border border-champion-200 dark:border-champion-800 rounded-xl shadow-sm;
  }

  .card-glass {
    @apply glass-effect rounded-xl shadow-lg;
  }
}

/* Gaming theme enhancements - Manifest Destiny */
@layer utilities {
  .patriot-glow {
    box-shadow: 0 0 5px var(--color-skyblue-400),
                0 0 10px var(--color-skyblue-400),
                0 0 15px var(--color-skyblue-400);
  }

  .champion-glow {
    box-shadow: 0 0 5px var(--color-champion-500),
                0 0 10px var(--color-champion-500),
                0 0 15px var(--color-champion-500);
  }

  .ocean-glow {
    box-shadow: 0 0 5px var(--color-ocean-500),
                0 0 10px var(--color-ocean-500),
                0 0 15px var(--color-ocean-500);
  }

  .glow-text {
    text-shadow: 0 0 5px currentColor,
                 0 0 10px currentColor,
                 0 0 15px currentColor;
  }

  .glass-effect {
    @apply bg-white/10 dark:bg-black/10 backdrop-blur-md border border-white/20 dark:border-white/10;
  }

  .glass-patriot {
    @apply bg-skyblue-500/10 dark:bg-skyblue-400/10 backdrop-blur-md border border-skyblue-300/30 dark:border-skyblue-400/20;
  }

  .glass-champion {
    @apply bg-champion-500/10 dark:bg-champion-500/10 backdrop-blur-md border border-champion-300/30 dark:border-champion-400/20;
  }

  /* Patriot Flow Gradient Background */
  .bg-patriot-flow {
    background: var(--gradient-patriot);
    background-size: 200% 200%;
  }

  .bg-patriot-flow-animated {
    background: var(--gradient-patriot);
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
  }
}

/* Dark mode transitions */
@layer base {
  * {
    @apply transition-colors duration-200;
  }
}

/* Treasury Management Specific Fixes */
@layer utilities {
  .treasury-management h1,
  .treasury-management h2,
  .treasury-management h3 {
    @apply text-gray-900 dark:text-white !important;
  }

  .treasury-management p,
  .treasury-management span:not(.inline-flex) {
    @apply text-gray-600 dark:text-gray-300 !important;
  }

  .treasury-management .text-sm {
    @apply text-gray-500 dark:text-gray-400 !important;
  }

  .treasury-management input[type="text"] {
    @apply bg-white dark:bg-gray-700 text-gray-900 dark:text-white border-gray-300 dark:border-gray-600 !important;
  }
}