sciagent/frontend_admin/src/index.css

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

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here.
All colors MUST be HSL.
*/

@layer base {
  :root {
    /* Warm canvas + cool institutional primary — clearer layers than flat gray-on-cream */
    --background: 38 32% 96%;
    --foreground: 222 28% 16%;

    --card: 0 0% 100%;
    --card-foreground: 222 28% 16%;

    --popover: 0 0% 100%;
    --popover-foreground: 222 28% 16%;

    --primary: 217 52% 38%;
    --primary-foreground: 210 40% 98%;

    --secondary: 220 18% 92%;
    --secondary-foreground: 222 28% 22%;

    --muted: 36 22% 92%;
    --muted-foreground: 220 12% 42%;

    --accent: 168 42% 38%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 72% 48%;
    --destructive-foreground: 210 40% 98%;

    --border: 220 14% 88%;
    --input: 220 14% 88%;
    --ring: 217 52% 38%;

    --radius: 1rem;

    /* Custom design tokens — tuned to sit cleanly on the new base */
    --tag-financing: 215 48% 78%;
    --tag-lifestyle: 162 36% 72%;
    --tag-community: 32 42% 62%;
    --tag-wellness: 278 32% 74%;
    --tag-travel: 198 48% 72%;
    --tag-creativity: 328 38% 76%;
    --tag-growth: 48 46% 68%;

    /* Polish design tokens */
    --cream: 40 38% 92%;
    --cream-foreground: 222 28% 16%;
    --surface-elevated: 0 0% 99%;
    --shadow-soft: 222 28% 16%;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Sidebar tokens */
    --sidebar-background: 220 16% 97%;
    --sidebar-foreground: 222 28% 16%;
    --sidebar-primary: 217 52% 38%;
    --sidebar-primary-foreground: 210 40% 98%;
    --sidebar-accent: 220 18% 93%;
    --sidebar-accent-foreground: 222 28% 22%;
    --sidebar-border: 220 14% 88%;
    --sidebar-ring: 217 52% 38%;
  }

  .dark {
    --background: 222 24% 12%;
    --foreground: 210 36% 96%;

    --card: 222 22% 16%;
    --card-foreground: 210 36% 96%;

    --popover: 222 24% 12%;
    --popover-foreground: 210 36% 96%;

    --primary: 213 62% 58%;
    --primary-foreground: 222 28% 12%;

    --secondary: 217 18% 22%;
    --secondary-foreground: 210 36% 96%;

    --muted: 220 16% 20%;
    --muted-foreground: 220 12% 64%;

    --accent: 168 40% 44%;
    --accent-foreground: 210 36% 98%;

    --destructive: 0 63% 48%;
    --destructive-foreground: 210 36% 98%;

    --border: 217 16% 24%;
    --input: 217 16% 24%;
    --ring: 213 62% 58%;

    /* Dark mode tag colors */
    --tag-financing: 215 42% 42%;
    --tag-lifestyle: 162 32% 40%;
    --tag-community: 32 34% 42%;
    --tag-wellness: 278 28% 46%;
    --tag-travel: 198 42% 44%;
    --tag-creativity: 328 32% 46%;
    --tag-growth: 48 38% 44%;

    /* Dark mode polish tokens */
    --cream: 222 18% 22%;
    --cream-foreground: 210 36% 96%;
    --surface-elevated: 222 22% 18%;
    --shadow-soft: 222 28% 6%;

    /* Sidebar tokens */
    --sidebar-background: 222 22% 14%;
    --sidebar-foreground: 210 36% 96%;
    --sidebar-primary: 213 62% 58%;
    --sidebar-primary-foreground: 222 28% 12%;
    --sidebar-accent: 217 18% 20%;
    --sidebar-accent-foreground: 210 36% 96%;
    --sidebar-border: 217 16% 24%;
    --sidebar-ring: 213 62% 58%;
  }
}

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

  body {
    @apply bg-background text-foreground font-sans antialiased;
  }

  html {
    scroll-behavior: smooth;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-serif tracking-tight;
  }
}

@layer utilities {
  .card-hover {
    @apply transition-all duration-500 hover:scale-[1.02];
    box-shadow: 0 4px 20px -4px hsl(var(--shadow-soft) / 0.1);
  }

  .card-hover:hover {
    box-shadow: 0 20px 40px -10px hsl(var(--shadow-soft) / 0.15);
  }

  .pill-nav {
    @apply rounded-full bg-[hsl(var(--surface-elevated))] backdrop-blur-lg border border-border/50;
  }

  .floating-button {
    @apply w-12 h-12 rounded-full bg-[hsl(var(--cream)/0.9)] backdrop-blur-sm flex items-center justify-center text-[hsl(var(--cream-foreground))] hover:bg-[hsl(var(--cream))] hover:scale-110 transition-all duration-300;
    box-shadow: 0 4px 12px -2px hsl(var(--shadow-soft) / 0.15);
  }

  /* Animation keyframes */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  .animate-fade-in {
    animation: fadeIn 0.5s ease-out;
  }

  .animate-slide-up {
    animation: slideUp 0.6s ease-out;
  }

  .animate-slide-down {
    animation: slideDown 0.6s ease-out;
  }

  .animate-scale-in {
    animation: scaleIn 0.5s ease-out;
  }

  /* Stagger animations */
  .stagger-1 {
    animation-delay: 0.1s;
    opacity: 0;
    animation-fill-mode: forwards;
  }

  .stagger-2 {
    animation-delay: 0.2s;
    opacity: 0;
    animation-fill-mode: forwards;
  }

  .stagger-3 {
    animation-delay: 0.3s;
    opacity: 0;
    animation-fill-mode: forwards;
  }

  .stagger-4 {
    animation-delay: 0.4s;
    opacity: 0;
    animation-fill-mode: forwards;
  }

  .stagger-5 {
    animation-delay: 0.5s;
    opacity: 0;
    animation-fill-mode: forwards;
  }

  .stagger-6 {
    animation-delay: 0.6s;
    opacity: 0;
    animation-fill-mode: forwards;
  }

  .tag-financing {
    @apply bg-[hsl(var(--tag-financing))] text-primary;
  }

  .tag-lifestyle {
    @apply bg-[hsl(var(--tag-lifestyle))] text-primary;
  }

  .tag-community {
    @apply bg-[hsl(var(--tag-community))] text-primary;
  }

  .tag-wellness {
    @apply bg-[hsl(var(--tag-wellness))] text-primary;
  }

  .tag-travel {
    @apply bg-[hsl(var(--tag-travel))] text-primary;
  }

  .tag-creativity {
    @apply bg-[hsl(var(--tag-creativity))] text-primary;
  }

  .tag-growth {
    @apply bg-[hsl(var(--tag-growth))] text-primary;
  }
}