gatehouse-ui/src/index.css

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

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

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

@layer base {
  :root {
    /* Core palette - Light blue-gray with teal accent */
    --background: 216 22% 94%;        /* cool blue-gray — cards lift clearly off this */
    --foreground: 222 47% 9%;         /* near-black navy */

    --card: 0 0% 100%;                /* pure white — 6% lightness gap over bg */
    --card-foreground: 222 47% 9%;

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

    /* Primary — theme-configurable (teal default, red for dev, purple for staging) */
    --primary: var(--theme-primary);
    --primary-foreground: var(--theme-primary-foreground);

    /* Secondary — cool blue-gray, clearly darker than bg */
    --secondary: 216 20% 91%;
    --secondary-foreground: 222 47% 18%;

    /* Muted — noticeably darker than secondary, used for section bg */
    --muted: 216 18% 88%;
    --muted-foreground: 222 18% 42%;

    /* Accent — same as primary */
    --accent: var(--theme-primary);
    --accent-foreground: var(--theme-primary-foreground);

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

    --success: 152 60% 30%;
    --success-foreground: 0 0% 100%;

    --warning: 38 90% 48%;
    --warning-foreground: 0 0% 100%;

    --info: 199 80% 44%;
    --info-foreground: 0 0% 100%;

    /* UI chrome */
    --border: 216 18% 84%;            /* clearly visible on white card */
    --input: 216 18% 92%;
    --ring: var(--theme-ring);

    --radius: 0.5rem;

    /* Sidebar */
    --sidebar-background: 222 30% 95%;
    --sidebar-foreground: 222 47% 18%;
    --sidebar-primary: var(--theme-sidebar-primary);
    --sidebar-primary-foreground: var(--theme-sidebar-primary-foreground);
    --sidebar-accent: 216 20% 88%;
    --sidebar-accent-foreground: 222 47% 9%;
    --sidebar-border: 216 18% 84%;
    --sidebar-ring: var(--theme-ring);
    --sidebar-muted: 222 20% 48%;

    /* Gradients */
    --gradient-brand: linear-gradient(135deg, hsl(var(--theme-primary)), hsl(var(--theme-primary) / 0.8));
    --gradient-accent: linear-gradient(135deg, hsl(var(--theme-primary)), hsl(var(--theme-primary) / 0.8));
    --gradient-subtle: linear-gradient(135deg, hsl(216 28% 97%), hsl(216 18% 93%));

    /* Shadows — stronger alpha so cards lift off the bg */
    --shadow-sm: 0 1px 2px 0 hsl(222 47% 9% / 0.10);
    --shadow-md: 0 4px 6px -1px hsl(222 47% 9% / 0.14), 0 2px 4px -2px hsl(222 47% 9% / 0.10);
    --shadow-lg: 0 10px 15px -3px hsl(222 47% 9% / 0.14), 0 4px 6px -4px hsl(222 47% 9% / 0.10);
    --shadow-card: 0 2px 6px 0 hsl(222 47% 9% / 0.10), 0 1px 2px -1px hsl(222 47% 9% / 0.08);
  }

  .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 {
  /* Theme-specific branding enhancements */
  
  /* Marketing header - theme colored */
  .marketing-header {
    @apply border-b transition-colors duration-300;
    background-color: hsl(var(--theme-primary) / 0.03);
    border-color: hsl(var(--theme-primary) / 0.2);
  }
  
  /* Theme indicator badge */
  .theme-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    background-color: hsl(var(--theme-primary) / 0.15);
    color: hsl(var(--theme-primary));
  }
  
  /* Theme-colored sidebar header */
  .sidebar-header-theme {
    background: linear-gradient(135deg, 
      hsl(var(--theme-sidebar-primary)) 0%, 
      hsl(var(--theme-sidebar-primary) / 0.85) 100%
    );
  }
  
  /* Theme-colored buttons */
  .btn-theme {
    @apply bg-primary text-primary-foreground hover:opacity-90 transition-opacity;
  }
  
  /* Theme ring focus */
  .focus-ring:focus-visible {
    @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
  }
  
  /* 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;
  }
  
  /* Dev/Staging environment banner */
  .env-banner {
    @apply fixed top-0 left-0 right-0 z-50 px-3 py-1 text-center text-xs font-bold uppercase tracking-wider;
    background: linear-gradient(90deg, 
      hsl(var(--theme-primary)) 0%, 
      hsl(var(--theme-primary) / 0.8) 50%, 
      hsl(var(--theme-primary)) 100%
    );
    color: hsl(var(--theme-primary-foreground));
  }
  
  /* Additional env indicator on page */
  .env-indicator {
    @apply inline-block w-2 h-2 rounded-full ml-2;
    background-color: hsl(var(--theme-primary));
    animation: pulse 2s ease-in-out infinite;
  }
  
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
}

@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);
    }
  }
}