@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700;800&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Enhanced Design System - Deep, Professional Theme Based on Logo */

@layer base {
  :root {
    /* Brand Colors */
    --citi-navy:         220 80% 25%;   /* Was 230 100% 13% — softened slightly, more balanced contrast */
    --citi-blue:         206 90%  55%;  /* Was 206 100% 40% — brighter and more vibrant */
    --citi-light-blue:   206 65% 85%;   /* Was 206 100% 95% — bring it into a usable tint range */
    --citi-emerald:      170 50% 45%;   /* Was 170 64% 52% — a bit deeper, more jewel-like */
    --citi-emerald-light:170 40% 80%;   /* Was 170 64% 95% — lighter but still visible on white */
    --citi-gold:         43 90% 55%;    /* Was 43 96% 56% — toned down saturation for legibility */

    /* Neutral Grays */
    --citi-gray:         220 15% 55%;   /* Was 220 9% 46% — a true mid-gray for text/borders */
    --citi-light-gray:   220 10% 95%;   /* Was 220 13% 97% — still very light, but not paper-white */
    --citi-dark-gray:    220 10% 25%;   /* Was 220 13% 15% — softer on the eyes for dark text */

    /* Surfaces */
    --citi-surface:      0   0% 98%;    /* Was 230 100% 8% — switched to a true near-white surface */

    /* System Colors */
    --background: 220 13% 97%;         /* Light background */
    --foreground: 220 13% 15%;         /* Dark text */
    --card: 0 0% 100%;                 /* White cards */
    --card-foreground: 220 13% 15%;    /* Dark text on cards */
    --popover: 0 0% 100%;
    --popover-foreground: 220 13% 15%;
    --primary: 230 100% 13%;           /* Navy primary */
    --primary-foreground: 0 0% 100%;   /* White on primary */
    --secondary: 220 13% 96%;          /* Light secondary */
    --secondary-foreground: 220 13% 15%; /* Dark on secondary */
    --muted: 220 13% 96%;
    --muted-foreground: 220 9% 46%;
    --accent: 206 100% 50%;            /* Blue accent */
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 230 100% 13%;
    --radius: 0.75rem;

    /* Sidebar colors */
    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 220 13% 15%;
    --sidebar-primary: 230 100% 13%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 220 13% 96%;
    --sidebar-accent-foreground: 220 13% 15%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 206 100% 50%;
  }

  .dark {
    /* Dark mode colors */
    --background: 230 100% 8%;
    --foreground: 220 13% 95%;
    --card: 230 100% 10%;
    --card-foreground: 220 13% 95%;
    --popover: 230 100% 10%;
    --popover-foreground: 220 13% 95%;
    --primary: 206 100% 50%;
    --primary-foreground: 230 100% 8%;
    --secondary: 220 13% 15%;
    --secondary-foreground: 220 13% 95%;
    --muted: 220 13% 15%;
    --muted-foreground: 220 9% 65%;
    --accent: 206 100% 50%;
    --accent-foreground: 230 100% 8%;
    --border: 220 13% 20%;
    --input: 220 13% 20%;
    --ring: 206 100% 50%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-inter antialiased;
    font-feature-settings: "rlig" 1, "calt" 1;
    scroll-behavior: smooth;
    line-height: 1.6;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-playfair font-semibold;
    text-rendering: optimizeLegibility;
    line-height: 1.2;
  }

  h1 { @apply text-5xl md:text-6xl lg:text-7xl; }
  h2 { @apply text-4xl md:text-5xl; }
  h3 { @apply text-3xl md:text-4xl; }
  h4 { @apply text-2xl md:text-3xl; }
  h5 { @apply text-xl md:text-2xl; }
  h6 { @apply text-lg md:text-xl; }
}

@layer components {
  /* Hero gradient with deep background */
  .hero-gradient {
    background: linear-gradient(135deg,
      hsl(var(--citi-navy)) 0%,
      hsl(var(--citi-dark-gray)) 50%,
      hsl(var(--citi-surface)) 100%
    );
    position: relative;
  }

  .hero-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 20% 20%, hsla(170, 64%, 52%, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, hsla(43, 96%, 56%, 0.05) 0%, transparent 50%),
      linear-gradient(135deg,
        hsla(230, 100%, 13%, 0.95) 0%,
        hsla(220, 13%, 15%, 0.9) 100%
      );
    pointer-events: none;
  }

  /* Noise texture overlay */
  .hero-gradient::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0);
    background-size: 20px 20px;
    opacity: 0.1;
    pointer-events: none;
  }

  /* Enhanced card styles */
  .card-elevated {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .card-elevated:hover {
    background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
    box-shadow:
      0 20px 25px -5px rgba(0, 0, 0, 0.1),
      0 10px 10px -5px rgba(0, 0, 0, 0.04),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
  }

  /* Professional section backgrounds */
  .section-light {
    background: linear-gradient(135deg,
      hsl(var(--background)) 0%,
      hsl(var(--citi-light-gray)) 100%
    );
  }

  .section-dark {
    background: linear-gradient(135deg,
      hsl(var(--citi-navy)) 0%,
      hsl(var(--citi-dark-gray)) 100%
    );
  }

  /* Glassmorphic elements */
  .glass-card {
    @apply bg-white/90 backdrop-blur-lg border border-white/20 shadow-2xl;
  }

  /* Neumorphic buttons */
  .btn-neumorphic {
    background: linear-gradient(145deg, #f0f0f0, #cacaca);
    box-shadow:
      5px 5px 10px #bebebe,
      -5px -5px 10px #ffffff;
    border: none;
    transition: all 0.3s ease;
  }

  .btn-neumorphic:hover {
    transform: translateY(-1px);
    box-shadow:
      7px 7px 14px #bebebe,
      -7px -7px 14px #ffffff;
  }

  .btn-neumorphic:active {
    box-shadow:
      inset 5px 5px 10px #bebebe,
      inset -5px -5px 10px #ffffff;
  }

  /* Accent buttons with glow */
  .btn-accent {
    @apply bg-accent text-accent-foreground font-semibold;
    box-shadow: 0 0 20px hsla(206, 100%, 50%, 0.3);
    transition: all 0.3s ease;
  }

  .btn-accent:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 30px hsla(206, 100%, 50%, 0.4);
  }

  /* Typography enhancements */
  .text-gradient {
    background: linear-gradient(135deg,
      hsl(var(--citi-navy)) 0%,
      hsl(var(--citi-blue)) 50%,
      hsl(var(--accent)) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Layout utilities */
  .section-padding {
    @apply py-20 lg:py-28;
  }

  .container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* Animation utilities */
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  .animate-glow {
    animation: glow 2s ease-in-out infinite alternate;
  }

  /* Micro-interactions */
  .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
  }

  /* Data visualization containers */
  .data-card {
    @apply bg-white rounded-2xl p-8 shadow-lg border border-gray-100;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    position: relative;
    overflow: hidden;
  }

  .data-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
      hsl(var(--accent)) 0%,
      hsl(var(--citi-blue)) 100%
    );
  }

  /* Icon enhancements */
  .icon-container {
    @apply w-16 h-16 rounded-xl flex items-center justify-center;
    background: linear-gradient(135deg,
      hsla(206, 100%, 50%, 0.1) 0%,
      hsla(230, 100%, 13%, 0.1) 100%
    );
    border: 1px solid hsla(206, 100%, 50%, 0.2);
    transition: all 0.3s ease;
  }

  .icon-container:hover {
    transform: scale(1.1) rotate(5deg);
    background: linear-gradient(135deg,
      hsla(206, 100%, 50%, 0.2) 0%,
      hsla(230, 100%, 13%, 0.2) 100%
    );
  }

  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
  }

  @keyframes glow {
    from { box-shadow: 0 0 20px hsla(206, 100%, 50%, 0.3); }
    to { box-shadow: 0 0 30px hsla(206, 100%, 50%, 0.6); }
  }
}

/* Enhanced scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--muted));
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg,
    hsl(var(--accent)) 0%,
    hsl(var(--citi-blue)) 100%
  );
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg,
    hsl(var(--citi-blue)) 0%,
    hsl(var(--accent)) 100%
  );
}

/* Print styles */
@media print {
  .no-print {
    display: none;
  }

  body {
    font-size: 12pt;
    line-height: 1.4;
  }

  h1, h2, h3 {
    page-break-after: avoid;
  }
}

/* Responsive enhancements */
@media (max-width: 768px) {
  .hero-gradient::before {
    background: linear-gradient(180deg,
      hsla(230, 100%, 13%, 0.95) 0%,
      hsla(220, 13%, 15%, 0.9) 100%
    );
  }
}