@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%;
    --foreground: 222 47% 9%;

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

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

    /* Primary — theme-configurable */
    --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 */
    --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%;
    --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%;

    /* Shadows */
    --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 {
  /* Environment banner — solid theme color */
  .env-banner {
    @apply fixed top-0 left-0 right-0 z-[100] px-3 py-1.5 text-center text-xs font-bold uppercase tracking-wider;
    background-color: hsl(var(--theme-primary));
    color: hsl(var(--theme-primary-foreground));
    box-shadow: 0 2px 4px 0 hsl(var(--theme-primary) / 0.3);
  }

  /* Sidebar header — solid theme color background */
  .sidebar-header-themed {
    background-color: hsl(var(--theme-sidebar-primary));
    color: hsl(var(--theme-sidebar-primary-foreground));
    border-bottom: 1px solid hsl(var(--theme-sidebar-primary) / 0.3);
  }

  /* Top bar — theme-colored bottom border + subtle tint */
  .top-bar-themed {
    border-bottom: 2px solid hsl(var(--theme-primary));
    background-color: hsl(var(--theme-primary) / 0.04);
  }

  /* Active nav item — theme color background */
  .active-nav-themed {
    background-color: hsl(var(--theme-primary) / 0.12);
    color: hsl(var(--theme-primary));
    border-radius: var(--radius);
  }

  /* 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 {
  .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); }
  }
}