monacousa-portal/src/app.css

@import "tailwindcss";

/* Monaco USA Custom Theme */
@theme {
  /* Monaco Red - Primary Brand Color */
  --color-monaco-50: #fef2f2;
  --color-monaco-100: #fee2e2;
  --color-monaco-200: #fecaca;
  --color-monaco-300: #fca5a5;
  --color-monaco-400: #f87171;
  --color-monaco-500: #ef4444;
  --color-monaco-600: #dc2626;
  --color-monaco-700: #b91c1c;
  --color-monaco-800: #991b1b;
  --color-monaco-900: #7f1d1d;
  --color-monaco-950: #450a0a;

  /* Glass effect shadows */
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-glass-lg: 0 25px 50px rgba(0, 0, 0, 0.15);
  --shadow-glass-xl: 0 35px 60px rgba(0, 0, 0, 0.2);

  /* Backdrop blur values */
  --blur-glass: 10px;
  --blur-glass-lg: 20px;

  /* Border radius */
  --radius-glass: 16px;
  --radius-glass-lg: 24px;

  /* Animation durations */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;

  /* Font family */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Base styles */
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 0 84% 50%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 0 84% 50%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 0 84% 50%;
    --primary-foreground: 210 40% 98%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 0 84% 50%;
  }
}

@layer base {
  * {
    border-color: hsl(var(--border));
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: var(--font-sans);
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

/* Glass-morphism utilities - in @layer components for proper ordering */
@layer components {
  .glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(var(--blur-glass));
    -webkit-backdrop-filter: blur(var(--blur-glass));
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--shadow-glass);
  }

  .glass-dark {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(var(--blur-glass));
    -webkit-backdrop-filter: blur(var(--blur-glass));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-glass);
  }

  .glass-card {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(var(--blur-glass));
    -webkit-backdrop-filter: blur(var(--blur-glass));
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: var(--shadow-glass);
    border-radius: var(--radius-glass);
  }

  .glass-card-dark {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(var(--blur-glass));
    -webkit-backdrop-filter: blur(var(--blur-glass));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-glass);
    border-radius: var(--radius-glass);
  }

  .gradient-monaco {
    background: linear-gradient(135deg, var(--color-monaco-600) 0%, var(--color-monaco-700) 100%);
  }

  .gradient-monaco-light {
    background: linear-gradient(135deg, var(--color-monaco-50) 0%, var(--color-monaco-100) 100%);
  }

  .text-gradient-monaco {
    background: linear-gradient(135deg, var(--color-monaco-600) 0%, var(--color-monaco-800) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}

/* Custom utilities for shadcn-svelte compatibility */
@layer utilities {
  /* Border color utility using CSS variable */
  .border-border {
    border-color: hsl(var(--border));
  }

  /* Background utilities using CSS variables */
  .bg-background {
    background-color: hsl(var(--background));
  }

  .bg-foreground {
    background-color: hsl(var(--foreground));
  }

  .bg-card {
    background-color: hsl(var(--card));
  }

  .bg-popover {
    background-color: hsl(var(--popover));
  }

  .bg-primary {
    background-color: hsl(var(--primary));
  }

  .bg-secondary {
    background-color: hsl(var(--secondary));
  }

  .bg-muted {
    background-color: hsl(var(--muted));
  }

  .bg-accent {
    background-color: hsl(var(--accent));
  }

  .bg-destructive {
    background-color: hsl(var(--destructive));
  }

  /* Text color utilities using CSS variables */
  .text-foreground {
    color: hsl(var(--foreground));
  }

  .text-card-foreground {
    color: hsl(var(--card-foreground));
  }

  .text-popover-foreground {
    color: hsl(var(--popover-foreground));
  }

  .text-primary-foreground {
    color: hsl(var(--primary-foreground));
  }

  .text-secondary-foreground {
    color: hsl(var(--secondary-foreground));
  }

  .text-muted-foreground {
    color: hsl(var(--muted-foreground));
  }

  .text-accent-foreground {
    color: hsl(var(--accent-foreground));
  }

  .text-destructive-foreground {
    color: hsl(var(--destructive-foreground));
  }

  /* Ring utility */
  .ring-ring {
    --tw-ring-color: hsl(var(--ring));
  }

  /* Input border utility */
  .border-input {
    border-color: hsl(var(--input));
  }

  /* Scrollbar styling */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
  }

  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: hsl(var(--muted-foreground) / 0.3);
    border-radius: 3px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: hsl(var(--muted-foreground) / 0.5);
  }
}