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

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0); /* White */
  --foreground: oklch(
    0.205
    0.02
    252
  ); /* Numbers Associates Dark Blue #152336 */
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.205 0.02 252);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.205 0.02 252);
  --primary: oklch(0.205 0.02 252); /* Numbers Associates Dark Blue #152336 */
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.666 0.11 45); /* Numbers Associates Orange #f47734 */
  --secondary-foreground: oklch(1 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.666 0.11 45); /* Numbers Associates Orange #f47734 */
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.666 0.11 45); /* Numbers Associates Orange */
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0.02 252);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0.02 252);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);

  /* Professional max-width constraints */
  --max-width-container: 1400px;
  --max-width-content: 1200px;
  --max-width-prose: 65ch;
  --max-width-narrow: 48rem;
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0.02 252);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0.02 252);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0.02 252);
  --secondary: oklch(0.666 0.11 45);
  --secondary-foreground: oklch(1 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.666 0.11 45);
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.666 0.11 45);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0.02 252);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

@layer base {
  * {
    @apply border-border;
  }
  html, body {
    height: 100%;
  }
  body {
    @apply bg-background text-foreground;
    margin: 0;
    padding: 0;
    font-family:
      -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
      "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
      sans-serif;
  }
}

@layer utilities {
  /* Professional Container Utilities */
  .container-professional {
    width: 100%;
    max-width: var(--max-width-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .container-content {
    width: 100%;
    max-width: var(--max-width-content);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .container-prose {
    width: 100%;
    max-width: var(--max-width-prose);
    margin-left: auto;
    margin-right: auto;
  }

  .container-narrow {
    width: 100%;
    max-width: var(--max-width-narrow);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Responsive Container Padding */
  @media (min-width: 640px) {
    .container-professional,
    .container-content,
    .container-narrow {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  }

  @media (min-width: 768px) {
    .container-professional,
    .container-content,
    .container-narrow {
      padding-left: 2rem;
      padding-right: 2rem;
    }
  }

  @media (min-width: 1024px) {
    .container-professional,
    .container-content,
    .container-narrow {
      padding-left: 2.5rem;
      padding-right: 2.5rem;
    }
  }

  @media (min-width: 1280px) {
    .container-professional,
    .container-content,
    .container-narrow {
      padding-left: 3rem;
      padding-right: 3rem;
    }
  }

  /* Max-width utilities for responsive design */
  .max-w-container {
    max-width: var(--max-width-container);
  }

  .max-w-content {
    max-width: var(--max-width-content);
  }

  .max-w-prose {
    max-width: var(--max-width-prose);
  }

  .max-w-narrow {
    max-width: var(--max-width-narrow);
  }

  /* Responsive typography with proper line lengths */
  .text-responsive {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    line-height: 1.6;
  }

  .text-responsive-lg {
    font-size: clamp(1rem, 3vw, 1.125rem);
    line-height: 1.5;
  }

  .text-responsive-xl {
    font-size: clamp(1.125rem, 3.5vw, 1.25rem);
    line-height: 1.4;
  }

  .text-responsive-2xl {
    font-size: clamp(1.25rem, 4vw, 1.5rem);
    line-height: 1.3;
  }

  .text-responsive-3xl {
    font-size: clamp(1.5rem, 4.5vw, 1.875rem);
    line-height: 1.2;
  }

  .text-responsive-4xl {
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    line-height: 1.1;
  }

  /* Additional responsive typography classes */
  .text-responsive-hero {
    font-size: clamp(2rem, 6vw, 2.75rem);
    line-height: 1.1;
  }

  .text-responsive-h1 {
    font-size: clamp(1.875rem, 5vw, 2.5rem);
    line-height: 1.1;
  }

  .text-responsive-h2 {
    font-size: clamp(1.5rem, 4.5vw, 2rem);
    line-height: 1.2;
  }

  .text-responsive-h3 {
    font-size: clamp(1.25rem, 3.5vw, 1.5rem);
    line-height: 1.3;
  }

  .text-responsive-h4 {
    font-size: clamp(1.125rem, 3vw, 1.25rem);
    line-height: 1.4;
  }
}

/* Numbers Associates Brand Typography */
.font-heading {
  font-family: "Georgia", "Times New Roman", serif; /* Fallback for Gilmer */
  font-weight: 600;
}

.font-mono-numbers {
  font-family:
    var(--font-ubuntu-mono), "Ubuntu Mono", monospace;
}

/* Numbers Associates Brand Colors */
.text-na-blue {
  color: #152336;
}

.text-na-orange {
  color: #f47734;
}

.bg-na-blue {
  background-color: #152336;
}

.bg-na-orange {
  background-color: #f47734;
}

.border-na-blue {
  border-color: #152336;
}

.border-na-orange {
  border-color: #f47734;
}

/* Professional Layout Enhancements */
.section-padding {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

@media (min-width: 768px) {
  .section-padding {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

@media (min-width: 1024px) {
  .section-padding {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}

/* Smooth scrolling for better UX */
html {
  scroll-behavior: smooth;
}

/* Focus styles for accessibility */
*:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Print styles */
@media print {
  .container-professional,
  .container-content,
  .container-narrow {
    max-width: none;
    padding: 0;
  }
}