/* Custom CSS Variables - Isla de Oro Modern Latin Opulence */
@layer base {
  :root {
    /* Isla de Oro Primary Gold Scale */
    --color-primary-50: #fff9f0;
    --color-primary-100: #f9efd9;
    --color-primary-200: #ebd9a3;
    --color-primary-300: #e1bb64;
    --color-primary-400: #d7ac55;
    --color-primary-500: #cda349;
    --color-primary-600: #b68733;
    --color-primary-700: #8b6a1f;
    --color-primary-800: #5a4614;
    --color-primary-900: #2d2310;

    /* Brand Palette */
    --color-brand-terracotta: #d2694c;
    --color-brand-cream: #f3e9da;
    --color-brand-seafoam: #86bdb5;
    --color-brand-mahogany: #4b2c24;
    --color-brand-gold: #cda349;
    --color-brand-coral: #d97a6a;
    --color-brand-forest: #2f4f3e;
    --color-brand-mango: #e78c3d;
    --color-brand-emerald: #0d4b3e;
    --color-brand-sand: #e6d3b3;

    /* Legacy accent aliases for compatibility */
    --color-accent-ocean: var(--color-brand-seafoam);
    --color-accent-sunset: var(--color-brand-terracotta);
    --color-accent-sunrise: var(--color-brand-mango);
    --color-accent-coral: var(--color-brand-coral);
    --color-accent-gold: var(--color-brand-gold);

    --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;

    /* Surfaces & Glow */
    --color-surface-base: var(--color-brand-cream);
    --color-surface-raised: var(--color-brand-sand);
    --color-surface-overlay: #f9efd9;
    --color-surface-contrast: #fff9f0;
    --color-ink: var(--color-brand-mahogany);
    --color-ink-soft: #714234;
    --color-ink-muted: rgba(75, 44, 36, 0.72);
    --color-brand-glow-warm: rgba(205, 163, 73, 0.6);
    --color-brand-glow-cool: rgba(134, 189, 181, 0.45);

    /* Border Colors for Tailwind Integration */
    --color-border-base: var(--color-primary-200);
    --color-border-subtle: var(--color-primary-100);

    /* Thematic aliases */
    --color-sunset: var(--color-brand-terracotta);
    --color-sunrise: var(--color-brand-mango);
    --color-ocean: var(--color-brand-seafoam);
    --color-sand: var(--color-brand-sand);
    --color-palm: var(--color-brand-forest);
  }

  /* Font loading - Art Deco headline and modern body */
  @font-face {
    font-family: 'Playfair Display SC';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
      url('/fonts/PlayfairDisplaySC-Regular-edb9d82712def533058633a2dbba0716.woff2?vsn=d') format('woff2'),
      url('/fonts/PlayfairDisplaySC-Regular-7259559389b4cd800a81627a4af2f77f.ttf?vsn=d') format('truetype');
  }

  @font-face {
    font-family: 'Playfair Display SC';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src:
      url('/fonts/PlayfairDisplaySC-Bold-4940c129a956f7dd52ee0e41dc3c310d.woff2?vsn=d') format('woff2'),
      url('/fonts/PlayfairDisplaySC-Bold-86025f166365a770b0b615baab4c0b78.ttf?vsn=d') format('truetype');
  }

  @font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src:
      url('/fonts/PlayfairDisplay-VariableFont_wght-607ccee303e571ab22a4f9c29c161701.woff2?vsn=d') format('woff2-variations'),
      url('/fonts/PlayfairDisplay-VariableFont_wght-05fb71dda96f8396e5639225b0d1c036.ttf?vsn=d') format('truetype-variations');
  }

  @font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400 900;
    font-display: swap;
    src:
      url('/fonts/PlayfairDisplay-Italic-VariableFont_wght-430715cf4478f0ef4c2b542755eb2b5a.woff2?vsn=d') format('woff2-variations'),
      url('/fonts/PlayfairDisplay-Italic-VariableFont_wght-4ee9a1562fd074aebc0d5f096ed72c6e.ttf?vsn=d') format('truetype-variations');
  }

  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src:
      url('/fonts/Lato-Light-1c40a91d4849749667bad1266bcc2d55.woff2?vsn=d') format('woff2'),
      url('/fonts/Lato-Light-2bcc211c05fc425a57b2767a4cdcf174.ttf?vsn=d') format('truetype');
  }

  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
      url('/fonts/Lato-Regular-ae05cb2ad509482faafc41f4f6c86220.woff2?vsn=d') format('woff2'),
      url('/fonts/Lato-Regular-122dd68d69fe9587e062d20d9ff5de2a.ttf?vsn=d') format('truetype');
  }

  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src:
      url('/fonts/Lato-Bold-25583230b7fa52a5aa215dedae394a2c.woff2?vsn=d') format('woff2'),
      url('/fonts/Lato-Bold-24b516c266d7341c954cb2918f1c8f38.ttf?vsn=d') format('truetype');
  }

  @font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src:
      url('/fonts/Lato-LightItalic-b236818ae1bd6935415fdc77e8047ec9.woff2?vsn=d') format('woff2'),
      url('/fonts/Lato-LightItalic-2404a6da847c878edbc8280745365cba.ttf?vsn=d') format('truetype');
  }

  @font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src:
      url('/fonts/Lato-Italic-67fa6ace32a8a047fc3aa8776d815368.woff2?vsn=d') format('woff2'),
      url('/fonts/Lato-Italic-5d22f337a040ae2857e36e7c5800369b.ttf?vsn=d') format('truetype');
  }

  @font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src:
      url('/fonts/Lato-BoldItalic-795eba958ef954c676056ecb316304eb.woff2?vsn=d') format('woff2'),
      url('/fonts/Lato-BoldItalic-acc03ac1e9162f0388c005177d55d762.ttf?vsn=d') format('truetype');
  }

  @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 */
@layer components {
  /* Flash messages */
  .alert {
    @apply p-4 rounded-lg mb-4;
  }

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

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

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

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

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

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

/* Isla de Oro theme enhancements */
@layer utilities {
  .tropical-glow {
    box-shadow: 0 0 24px var(--color-brand-glow-warm),
                0 0 48px var(--color-brand-glow-cool);
  }

  .ocean-glow {
    box-shadow: 0 0 18px rgba(13, 75, 62, 0.35),
                0 0 36px rgba(134, 189, 181, 0.4);
  }

  .sunset-glow {
    box-shadow: 0 0 18px rgba(210, 105, 76, 0.45),
                0 0 36px rgba(231, 140, 61, 0.4);
  }

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

  .glass-effect {
    background-color: rgba(255, 249, 240, 0.18);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(205, 163, 73, 0.35);
  }

  /* Deco gradients */
  .bg-tropical-gradient {
    background: linear-gradient(135deg, var(--color-brand-terracotta) 0%, var(--color-brand-gold) 45%, var(--color-brand-seafoam) 100%);
  }

  .bg-sunset-gradient {
    background: linear-gradient(135deg, var(--color-brand-terracotta) 0%, var(--color-brand-mango) 100%);
  }

  .bg-ocean-gradient {
    background: linear-gradient(135deg, var(--color-brand-seafoam) 0%, var(--color-brand-emerald) 100%);
  }
}

/* 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;
  }
}