gatehouse-ui/src/index.css

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

/* Gatehouse Design System - Enterprise Identity & Access Platform
   Authoritative, infrastructure-grade aesthetic with slate/charcoal/muted blue palette
   Colors are HSL for theming flexibility
*/

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

@layer base {
  :root {
    /* Core palette - Deep slate with teal accent */
    --background: 210 20% 98%;
    --foreground: 222 47% 11%;

    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;

    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;

    /* Primary - Deep navy for trust */
    --primary: 222 47% 20%;
    --primary-foreground: 210 40% 98%;

    /* Secondary - Soft slate */
    --secondary: 215 20% 95%;
    --secondary-foreground: 222 47% 20%;

    /* Muted - Subtle backgrounds */
    --muted: 215 20% 96%;
    --muted-foreground: 215 16% 47%;

    /* Accent - Teal for actions and highlights */
    --accent: 173 58% 39%;
    --accent-foreground: 0 0% 100%;

    /* Semantic colors */
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;

    --success: 152 69% 31%;
    --success-foreground: 0 0% 100%;

    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;

    --info: 199 89% 48%;
    --info-foreground: 0 0% 100%;

    /* UI elements */
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 173 58% 39%;

    --radius: 0.5rem;

    /* Sidebar - Darker for visual hierarchy */
    --sidebar-background: 222 47% 11%;
    --sidebar-foreground: 215 20% 85%;
    --sidebar-primary: 173 58% 45%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 222 40% 18%;
    --sidebar-accent-foreground: 210 40% 98%;
    --sidebar-border: 222 40% 20%;
    --sidebar-ring: 173 58% 45%;
    --sidebar-muted: 215 16% 55%;

    /* Custom gradients and effects */
    --gradient-brand: linear-gradient(135deg, hsl(222 47% 20%), hsl(222 47% 11%));
    --gradient-accent: linear-gradient(135deg, hsl(173 58% 39%), hsl(173 58% 32%));
    --gradient-subtle: linear-gradient(135deg, hsl(210 20% 98%), hsl(215 20% 96%));
    
    --shadow-sm: 0 1px 2px 0 hsl(222 47% 11% / 0.05);
    --shadow-md: 0 4px 6px -1px hsl(222 47% 11% / 0.1), 0 2px 4px -2px hsl(222 47% 11% / 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(222 47% 11% / 0.1), 0 4px 6px -4px hsl(222 47% 11% / 0.1);
    --shadow-card: 0 1px 3px 0 hsl(222 47% 11% / 0.06), 0 1px 2px -1px hsl(222 47% 11% / 0.06);
  }

  .dark {
    --background: 222 47% 6%;
    --foreground: 210 40% 98%;

    --card: 222 47% 9%;
    --card-foreground: 210 40% 98%;

    --popover: 222 47% 9%;
    --popover-foreground: 210 40% 98%;

    --primary: 173 58% 45%;
    --primary-foreground: 222 47% 11%;

    --secondary: 222 40% 15%;
    --secondary-foreground: 210 40% 98%;

    --muted: 222 40% 15%;
    --muted-foreground: 215 20% 65%;

    --accent: 173 58% 39%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 62% 40%;
    --destructive-foreground: 0 0% 100%;

    --success: 152 69% 36%;
    --success-foreground: 0 0% 100%;

    --warning: 38 92% 55%;
    --warning-foreground: 0 0% 100%;

    --info: 199 89% 53%;
    --info-foreground: 0 0% 100%;

    --border: 222 40% 18%;
    --input: 222 40% 18%;
    --ring: 173 58% 45%;

    --sidebar-background: 222 47% 6%;
    --sidebar-foreground: 215 20% 85%;
    --sidebar-primary: 173 58% 45%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 222 40% 12%;
    --sidebar-accent-foreground: 210 40% 98%;
    --sidebar-border: 222 40% 15%;
    --sidebar-ring: 173 58% 45%;
    --sidebar-muted: 215 16% 55%;
  }
}

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

  html {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-feature-settings: "cv11", "ss01";
  }

  /* Smooth focus states */
  :focus-visible {
    @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
  }
}

@layer components {
  /* Auth card for public pages */
  .auth-card {
    @apply bg-card rounded-xl p-8 shadow-card border border-border;
  }

  /* Section header styling */
  .section-header {
    @apply text-lg font-semibold text-foreground mb-1;
  }

  .section-description {
    @apply text-sm text-muted-foreground;
  }

  /* Status badges */
  .status-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }

  .status-badge-success {
    @apply bg-success/10 text-success;
  }

  .status-badge-warning {
    @apply bg-warning/10 text-warning;
  }

  .status-badge-error {
    @apply bg-destructive/10 text-destructive;
  }

  .status-badge-info {
    @apply bg-info/10 text-info;
  }

  /* Page layout helpers */
  .page-container {
    @apply p-6 lg:p-8 max-w-5xl;
  }

  .page-header {
    @apply mb-8;
  }

  .page-title {
    @apply text-2xl font-semibold text-foreground tracking-tight;
  }

  .page-description {
    @apply text-muted-foreground mt-1;
  }
}

@layer utilities {
  /* Animation utilities */
  .animate-fade-in {
    animation: fadeIn 0.3s ease-out;
  }

  .animate-slide-in {
    animation: slideIn 0.3s ease-out;
  }

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

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