blue-ocean/app/globals.css

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

@layer base {
  :root {
    --background: 190 95% 95%;
    --foreground: 200 50% 3%;

    --card: 0 0% 100%;
    --card-foreground: 200 50% 3%;

    --popover: 0 0% 100%;
    --popover-foreground: 200 50% 3%;

    --primary: 190 100% 50%; /* Bright cyan */
    --primary-foreground: 0 0% 100%;

    --secondary: 185 100% 85%;
    --secondary-foreground: 200 50% 3%;

    --muted: 185 35% 88%;
    --muted-foreground: 200 40% 40%;

    --accent: 170 85% 45%; /* Bold turquoise */
    --accent-foreground: 200 50% 3%;

    --destructive: 345 84% 60%; /* Coral red */
    --destructive-foreground: 210 40% 98%;

    --border: 190 95% 85%;
    --input: 190 95% 85%;
    --ring: 190 100% 50%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 200 50% 3%;
    --foreground: 210 40% 98%;

    --card: 200 50% 3%;
    --card-foreground: 210 40% 98%;

    --popover: 200 50% 3%;
    --popover-foreground: 210 40% 98%;

    --primary: 190 100% 50%;
    --primary-foreground: 200 50% 3%;

    --secondary: 200 34% 20%;
    --secondary-foreground: 210 40% 98%;

    --muted: 200 34% 20%;
    --muted-foreground: 200 40% 60%;

    --accent: 170 85% 45%;
    --accent-foreground: 210 40% 98%;

    --destructive: 345 62% 40%;
    --destructive-foreground: 210 40% 98%;

    --border: 200 34% 20%;
    --input: 200 34% 20%;
    --ring: 190 100% 50%;
  }
}

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

  body {
    @apply bg-background text-foreground;
    background: linear-gradient(
      180deg,
      hsl(190 95% 95%) 0%,
      hsl(185 90% 92%) 100%
    );
    min-height: 100vh;
  }

  /* Animated waves for the header */
  @keyframes wave {
    0% {
      transform: translateX(0) translateZ(0) scaleY(1);
    }
    50% {
      transform: translateX(-25%) translateZ(0) scaleY(0.8);
    }
    100% {
      transform: translateX(-50%) translateZ(0) scaleY(1);
    }
  }

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

  .wave {
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 800 88.7' width='800' height='88.7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-.2-31.6z' fill='%23ffffff33'/%3E%3C/svg%3E");
    position: absolute;
    width: 200%;
    height: 100%;
    animation: wave 12s linear infinite;
    transform-origin: center bottom;
  }

  .wave-2 {
    animation: wave 18s linear reverse infinite;
    opacity: 0.5;
  }

  .wave-3 {
    animation: wave 20s linear infinite;
    opacity: 0.2;
  }

  .swell {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: swell 7s ease -1.25s infinite;
    transform-origin: center bottom;
  }

  /* Glass effect for cards */
  .glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  }

  .dark .glass-card {
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Gradient borders */
  .gradient-border {
    position: relative;
    border: none;
  }

  .gradient-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(
      45deg,
      hsl(190 100% 50%),
      hsl(170 85% 45%),
      hsl(190 100% 50%)
    );
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}

.tabs-list {
  @apply inline-flex h-12 items-center justify-center rounded-lg bg-white p-1 shadow-lg dark:bg-gray-800/50 backdrop-blur-sm;
}

.tab {
  @apply inline-flex items-center justify-center whitespace-nowrap rounded-md px-6 py-2.5 text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300;
}

.tab[data-state='active'] {
  @apply bg-gradient-to-r from-cyan-500 to-blue-500 text-white shadow-sm;
}

.tab[data-state='inactive'] {
  @apply text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-50;
}