resolutionflow/frontend/src/index.css

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

@layer base {
  :root {
    /* Monochrome Design System — Dark Only */
    --background: 0 0% 0%;
    --foreground: 0 0% 100%;
    --card: 0 0% 4%;
    --card-foreground: 0 0% 100%;
    --popover: 0 0% 4%;
    --popover-foreground: 0 0% 100%;
    --primary: 0 0% 100%;
    --primary-foreground: 0 0% 0%;
    --secondary: 0 0% 10%;
    --secondary-foreground: 0 0% 100%;
    --muted: 0 0% 10%;
    --muted-foreground: 0 0% 50%;
    --accent: 0 0% 8%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 0% 12%;
    --input: 0 0% 12%;
    --ring: 0 0% 100%;
    --radius: 0.75rem;
  }
}

@layer base {
  * {
    @apply border-border;
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
  }
  *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  *::-webkit-scrollbar-track {
    background: transparent;
  }
  *::-webkit-scrollbar-thumb {
    background-color: hsl(var(--border));
    border-radius: 9999px;
  }
  *::-webkit-scrollbar-thumb:hover {
    background-color: hsl(var(--muted-foreground));
  }

  body {
    @apply bg-background text-foreground;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
}

/* Animations */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-from-left {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes slide-in-from-bottom {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@layer utilities {
  .animate-fade-in {
    animation: fade-in 200ms ease-out;
  }

  .animate-fade-in-up {
    animation: fade-in-up 200ms ease-out;
  }

  .animate-slide-in-left {
    animation: slide-in-from-left 200ms ease-out;
  }

  .animate-slide-in-bottom {
    animation: slide-in-from-bottom 200ms ease-out;
  }

  .animate-scale-in {
    animation: scale-in 150ms ease-out;
  }

  /* Button press feedback */
  .btn-press {
    @apply active:scale-[0.98] transition-transform;
  }

  /* Glass card effect */
  .glass-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
  }

  .glass-card-hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    border-color: rgba(255, 255, 255, 0.12);
  }

  /* Active/highlighted card glow */
  .glass-card-glow {
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.1);
  }

  /* Stat card */
  .glass-stat {
    background: rgba(20, 20, 25, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
  }
}

/* Sonner Toast Customization */
@layer components {
  :where([data-sonner-toast]) {
    @apply bg-card text-card-foreground;
    @apply border border-border shadow-lg;
    @apply rounded-xl;
    font-family: 'Inter', system-ui, sans-serif;
    backdrop-filter: blur(10px);
  }

  :where([data-sonner-toast]) [data-title] {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
  }

  :where([data-sonner-toast][data-type="success"]) {
    border-color: rgba(52, 211, 153, 0.3);
  }
  :where([data-sonner-toast][data-type="success"]) [data-icon] {
    color: #34d399;
  }

  :where([data-sonner-toast][data-type="error"]) {
    border-color: rgba(248, 113, 113, 0.3);
  }
  :where([data-sonner-toast][data-type="error"]) [data-icon] {
    color: #f87171;
  }

  :where([data-sonner-toast][data-type="info"]) {
    @apply border-border;
  }
  :where([data-sonner-toast][data-type="info"]) [data-icon] {
    @apply text-muted-foreground;
  }

  :where([data-sonner-toast][data-type="warning"]) {
    border-color: rgba(251, 191, 36, 0.3);
  }
  :where([data-sonner-toast][data-type="warning"]) [data-icon] {
    color: #fbbf24;
  }

  :where([data-sonner-toast]) [data-close-button] {
    @apply text-muted-foreground hover:bg-accent hover:text-accent-foreground;
    @apply rounded-md transition-colors;
  }

  :where([data-sonner-toast]) [data-icon][data-loading] {
    @apply text-white;
  }

  /* React Day Picker Customization */
  .rdp-custom {
    @apply text-foreground;
  }

  .rdp-custom .rdp-month {
    @apply w-full;
  }

  .rdp-custom .rdp-caption {
    @apply flex justify-center items-center mb-4;
  }

  .rdp-custom .rdp-caption_label {
    @apply text-sm font-medium;
  }

  .rdp-custom .rdp-nav {
    @apply flex gap-1;
  }

  .rdp-custom .rdp-nav_button {
    @apply h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100;
  }

  .rdp-custom .rdp-table {
    @apply w-full border-collapse;
  }

  .rdp-custom .rdp-head_cell {
    @apply text-muted-foreground font-normal text-xs;
  }

  .rdp-custom .rdp-cell {
    @apply text-center text-sm p-0;
  }

  .rdp-custom .rdp-day {
    @apply h-9 w-9 p-0 font-normal hover:bg-accent rounded-md transition-colors;
  }

  .rdp-custom .rdp-day_selected {
    @apply bg-white text-black hover:bg-white/90 hover:text-black;
  }

  .rdp-custom .rdp-day_today {
    @apply bg-accent text-accent-foreground;
  }

  .rdp-custom .rdp-day_outside {
    @apply text-muted-foreground opacity-50;
  }

  .rdp-custom .rdp-day_disabled {
    @apply text-muted-foreground opacity-50;
  }

  .rdp-custom .rdp-day_range_middle {
    @apply bg-accent text-accent-foreground;
  }

  .rdp-custom .rdp-day_hidden {
    @apply invisible;
  }
}