/* Self-hosted Montserrat fonts - optimized loading strategy for first-time page load */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap; /* Show fallback immediately, swap when loaded - critical for body text */
  src: url('/fonts/montserrat-400-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: optional; /* Only use if already cached, prevents layout shift for headings */
  src: url('/fonts/montserrat-500-latin.woff2') format('woff2');
}

/* Font weight 600 removed - using 500 for semibold to reduce HTTP requests and improve FCP */

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

/* Professional Marketplace Design System - All colors MUST be HSL */

@layer base {
  :root {
    --background: 220 20% 98%;
    --foreground: 220 15% 15%;

    --card: 0 0% 100%;
    --card-foreground: 220 15% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 220 15% 15%;

    --primary: 220 70% 50%;
    --primary-foreground: 0 0% 100%;
    --primary-glow: 220 70% 60%;

    --secondary: 220 20% 95%;
    --secondary-foreground: 220 15% 25%;

    --muted: 220 15% 96%;
    --muted-foreground: 220 10% 50%;

    --accent: 45 100% 50%;
    --accent-foreground: 220 15% 15%;

    --destructive: 0 70% 55%;
    --destructive-foreground: 0 0% 100%;

    --success: 120 60% 45%;
    --success-foreground: 0 0% 100%;

    --warning: 35 90% 55%;
    --warning-foreground: 0 0% 100%;

    --border: 220 15% 90%;
    --input: 220 15% 95%;
    --ring: 220 70% 50%;

    /* Consultant Tier Colors */
    --tier-bronze: 25 50% 45%;
    --tier-silver: 210 15% 65%;
    --tier-gold: 45 100% 50%;
    --tier-platinum: 270 60% 70%;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-glow)));
    --gradient-hero: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary-glow)) 100%);
    --gradient-card: linear-gradient(145deg, hsl(0 0% 100%) 0%, hsl(220 20% 98%) 100%);
    --gradient-tier: linear-gradient(135deg, hsl(var(--accent)) 0%, hsl(45 100% 60%) 100%);

    /* Shadows */
    --shadow-card: 0 4px 20px -2px hsl(220 15% 15% / 0.1);
    --shadow-premium: 0 8px 30px -4px hsl(var(--accent) / 0.3);
    --shadow-hover: 0 8px 25px -5px hsl(220 15% 15% / 0.15);

    /* Animations - Performance Optimized */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    --radius: 0.5rem;

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5.3% 26.1%;

    --sidebar-primary: 240 5.9% 10%;

    --sidebar-primary-foreground: 0 0% 98%;

    --sidebar-accent: 240 4.8% 95.9%;

    --sidebar-accent-foreground: 240 5.9% 10%;

    --sidebar-border: 220 13% 91%;

    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .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: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --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: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

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

  body {
    @apply bg-background text-foreground;
  }

  /* Accessibility: Focus Visible Styles for WCAG 2.1 AA */
  *:focus-visible {
    @apply outline-2 outline-offset-2 outline-primary ring-2 ring-primary ring-offset-2;
  }

  /* Enhanced focus for interactive elements */
  button:focus-visible,
  a:focus-visible,
  [role="button"]:focus-visible,
  [tabindex="0"]:focus-visible {
    @apply outline-2 outline-offset-2 outline-primary shadow-lg;
  }

  /* Screen reader only utility class */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* Screen reader only that becomes visible on focus */
  .sr-only:focus,
  .focus\:not-sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}