/* Main stylesheet - industrial machine tool distributor palette */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

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

@layer base {
  :root {
  /* Industrial neutrals — gunmetal & slate */
  --background: 210 40% 98%; /* #f8fafc */
  --foreground: 215 19% 17%; /* #1f2937 */
  --card: 0 0% 100%;
  --card-foreground: 215 19% 17%;
  --popover: 0 0% 100%;
  --popover-foreground: 215 19% 17%;

  /* Gunmetal — primary brand surface for header, footer, dark bands */
  --primary: 215 25% 27%; /* #2d3748 */
  --primary-foreground: 210 40% 98%;

  /* Safety blue — links, active states, key accents */
  --brand: 217 91% 60%; /* #2563eb */
  --brand-foreground: 0 0% 100%;
  --brand-hover: 221 83% 53%; /* #1d4ed8 */

  /* Safety blue — single high-emphasis CTA color (same family as brand) */
  --cta: 217 91% 60%; /* #2563eb */
  --cta-foreground: 0 0% 100%;
  --cta-hover: 221 83% 53%; /* #1d4ed8 */

  /* shadcn accent — kept as subtle steel for hover backgrounds */
  --accent: 214 32% 91%;
  --accent-foreground: 215 19% 17%;

  /* Dark surfaces (used on header top bar, footer, CTA bands) */
  --surface-dark: 215 25% 27%; /* #2d3748 */
  --surface-dark-2: 217 22% 29%; /* #3a4759 */
  --surface-dark-border: 217 19% 35%; /* #4a5568 */
  --on-dark: 210 40% 98%; /* #f8fafc */
  --on-dark-muted: 215 16% 62%; /* #94a3b8 */

  /* Steel — light neutral surfaces */
  --steel-50: 210 40% 98%;
  --steel-100: 214 32% 91%; /* #e2e8f0 */
  --steel-200: 214 26% 84%; /* #cbd5e1 — borders */
  --steel-300: 215 20% 65%;
  --steel-500: 215 16% 47%; /* muted foreground */
  --steel-600: 215 19% 35%;
  --steel-700: 215 25% 27%;
  --steel-800: 217 33% 17%;

  /* Legacy secondary (kept for shadcn compat, points to steel) */
  --secondary: 214 26% 84%;
  --secondary-foreground: 215 19% 17%;

  --muted: 214 32% 91%;
  --muted-foreground: 215 16% 47%;

  --destructive: 0 72% 45%;
  --destructive-foreground: 0 0% 100%;
  --border: 214 26% 84%;
  --input: 214 26% 84%;
  --ring: 217 91% 60%;
  --radius: 0.375rem;

  /* Shadows — flatter, industrial */
  --shadow-sm: 0 1px 2px rgba(31, 41, 55, 0.06);
  --shadow-md: 0 4px 12px rgba(31, 41, 55, 0.08);
  --shadow-lg: 0 8px 24px rgba(31, 41, 55, 0.12);

  /* Sidebar — unchanged for admin views */
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5% 26%;
  --sidebar-primary: 217 91% 60%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 5% 96%;
  --sidebar-accent-foreground: 240 6% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 217 91% 60%;
  }

  .dark {
  --background: 217 33% 10%;
  --foreground: 210 40% 98%;
  --card: 217 25% 18%;
  --card-foreground: 210 40% 98%;
  --popover: 217 25% 18%;
  --popover-foreground: 210 40% 98%;
  --primary: 217 91% 60%;
  --primary-foreground: 217 33% 10%;
  --brand: 217 91% 60%;
  --brand-foreground: 217 33% 10%;
  --accent: 217 25% 22%;
  --accent-foreground: 210 40% 98%;
  --cta: 217 91% 60%;
  --cta-foreground: 217 33% 10%;
  --cta-hover: 221 83% 53%;
  --secondary: 217 25% 22%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217 25% 22%;
  --muted-foreground: 215 16% 62%;
  --destructive: 0 63% 45%;
  --destructive-foreground: 210 40% 98%;
  --border: 217 19% 28%;
  --input: 217 19% 28%;
  --ring: 217 91% 60%;
  }
}

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

 body {
 @apply bg-background text-foreground font-sans antialiased;
 font-display: swap;
 text-rendering: optimizeLegibility;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 font-feature-settings: "ss01", "cv11";
 line-height: 1.6;
 }

 /* Industrial type scale — Barlow Condensed, bold, tight leading, subtle tracking. */
 h1, h2, h3, h4, h5, h6 {
 @apply font-display font-bold text-[hsl(var(--primary))];
 letter-spacing: -0.01em;
 line-height: 1.05;
 }

 h1 { @apply text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold; letter-spacing: -0.02em; }
 h2 { @apply text-3xl sm:text-4xl md:text-5xl font-bold; }
 h3 { @apply text-2xl sm:text-3xl font-bold; line-height: 1.1; }
 h4 { @apply text-xl sm:text-2xl font-semibold; line-height: 1.15; }
 h5 { @apply text-lg sm:text-xl font-semibold; line-height: 1.2; }
 h6 { @apply text-base sm:text-lg font-semibold uppercase tracking-[0.08em]; line-height: 1.2; }

 p { @apply text-base leading-relaxed; }
 strong, b { @apply font-semibold text-[hsl(var(--primary))]; }

 /* Tabular numerics for any element that carries digits in tables/specs */
 table, .tabular, .stat-value { font-variant-numeric: tabular-nums; }

 html {
 scroll-behavior: smooth;
 }

 @media (prefers-reduced-motion: reduce) {
 *, *::before, *::after {
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
 }
 html { scroll-behavior: auto; }
 }

 ::-webkit-scrollbar { width: 8px; }
 ::-webkit-scrollbar-track { background: hsl(var(--steel-100)); }
 ::-webkit-scrollbar-thumb { background: hsl(var(--steel-300)); border-radius: 4px; }
 ::-webkit-scrollbar-thumb:hover { background: hsl(var(--steel-500)); }
}

@layer components {
 /* Eyebrow label — small ALL-CAPS tag with leading rule mark for industrial hierarchy */
 .eyebrow {
 @apply inline-flex items-center gap-3 text-xs sm:text-sm font-semibold uppercase tracking-[0.22em] text-[hsl(var(--brand))] mb-4;
 }
 .eyebrow::before {
 content: "";
 @apply inline-block w-8 h-px bg-[hsl(var(--brand))];
 }

 .eyebrow-on-dark {
 @apply inline-flex items-center gap-3 text-xs sm:text-sm font-semibold uppercase tracking-[0.22em] text-[hsl(var(--cta))] mb-4;
 }
 .eyebrow-on-dark::before {
 content: "";
 @apply inline-block w-8 h-px bg-[hsl(var(--cta))];
 }

 /* Small overline — used inside cards / spec labels */
 .overline {
 @apply text-[11px] font-semibold uppercase tracking-[0.16em] text-[hsl(var(--steel-500))];
 }

 /* Monospace for model numbers, specs, part codes */
 .mono {
 font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
 @apply text-sm tracking-tight;
 font-variant-numeric: tabular-nums;
 }

 .section-container {
 @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20;
 }

 /* Display sizes for hero / marquee-style headlines */
 .display-hero {
 @apply font-display font-extrabold uppercase text-white;
 font-size: clamp(2.5rem, 7vw, 5.5rem);
 line-height: 0.95;
 letter-spacing: -0.02em;
 }

 .display-1 {
 @apply font-display font-extrabold uppercase text-[hsl(var(--primary))];
 font-size: clamp(2rem, 5vw, 3.75rem);
 line-height: 1;
 letter-spacing: -0.015em;
 }

 .section-title {
 @apply font-display font-extrabold uppercase text-[hsl(var(--primary))];
 font-size: clamp(1.875rem, 4vw, 3rem);
 line-height: 1.02;
 letter-spacing: -0.01em;
 }

 .section-title-on-dark {
 @apply font-display font-extrabold uppercase text-[hsl(var(--on-dark))];
 font-size: clamp(1.875rem, 4vw, 3rem);
 line-height: 1.02;
 letter-spacing: -0.01em;
 }

 .section-subtitle {
 @apply text-lg md:text-xl text-[hsl(var(--steel-600))] mt-5 max-w-3xl leading-relaxed;
 }

 /* Lead paragraph — first body text under a heading */
 .lead {
 @apply text-lg md:text-xl text-[hsl(var(--steel-700))] leading-relaxed;
 }

 /* Spec table styling — flat rows with monospace values */
 .spec-table {
 @apply w-full border-t border-[hsl(var(--steel-200))];
 }
 .spec-table tr { @apply border-b border-[hsl(var(--steel-200))]; }
 .spec-table th {
 @apply text-left py-3 pr-4 text-xs font-semibold uppercase tracking-[0.14em] text-[hsl(var(--steel-500))] align-middle;
 width: 45%;
 }
 .spec-table td {
 @apply py-3 pl-4 text-sm font-semibold text-[hsl(var(--primary))] align-middle;
 font-variant-numeric: tabular-nums;
 }

 /* Flat industrial card */
 .card-flat {
 @apply bg-card border border-border rounded-md shadow-sm transition-all duration-200;
 }

 .card-flat:hover {
 @apply border-[hsl(var(--brand))] shadow-md;
 }

 .card-dark {
 @apply bg-[hsl(var(--surface-dark-2))] border border-[hsl(var(--surface-dark-border))] rounded-md transition-all duration-200;
 }

 .card-dark:hover {
 @apply border-[hsl(var(--cta))];
 }

 /* Legacy classes kept for compat but stripped of gradients */
 .glass-card {
 @apply card-flat;
 }
 .glass-glow { position: relative; }
 .glass-glow::before { content: none; }

 .feature-card {
 @apply p-6 rounded-md transition-all duration-300;
 }

 .button-primary {
 @apply inline-flex items-center justify-center gap-2 h-auto min-h-[44px] px-6 py-3 text-base font-semibold uppercase tracking-wider bg-[hsl(var(--cta))] hover:bg-[hsl(var(--cta-hover))] text-[hsl(var(--cta-foreground))] rounded-md transition-colors duration-200 shadow-sm hover:shadow-md;
 }

 .button-secondary {
 @apply inline-flex items-center justify-center gap-2 h-auto min-h-[44px] px-6 py-3 text-base font-semibold uppercase tracking-wider bg-transparent border-2 border-[hsl(var(--primary))] text-[hsl(var(--primary))] hover:bg-[hsl(var(--primary))] hover:text-[hsl(var(--primary-foreground))] rounded-md transition-colors duration-200;
 }

 .nav-link {
 @apply relative text-[hsl(var(--foreground))] hover:text-[hsl(var(--brand))] py-2 transition-colors duration-200 after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-0 after:bg-[hsl(var(--cta))] after:transition-all hover:after:w-full;
 }

 .pulse-chip {
 @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-[hsl(var(--brand))]/10 text-[hsl(var(--brand))] border border-[hsl(var(--brand))]/20;
 }
}

/* Animations */
.image-scale-in {
 animation: scaleIn 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes scaleIn {
 0% { transform: scale(0.95); opacity: 0; }
 100% { transform: scale(1); opacity: 1; }
}
.fadeIn {
 opacity: 0;
 transform: translateY(20px);
 animation: fadeIn 0.8s ease forwards;
}
@keyframes fadeIn {
 to { opacity: 1; transform: translateY(0); }
}
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }

.hover-lift {
 transition: transform 0.3s ease;
 will-change: transform;
}
.hover-lift:hover {
 transform: translateY(-4px) translateZ(0);
}

.service-card-hover {
 transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
 will-change: transform, box-shadow;
}
.service-card-hover:hover {
 transform: translateY(-4px) translateZ(0);
}

.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Mobile hero CTA fixes */
@media (max-width: 640px) {
 :is(.hero, .Hero, [data-section*="hero"]) :is(.ctaRow, [class*="cta"]) {
 display: flex !important;
 flex-wrap: wrap !important;
 gap: 12px !important;
 min-width: 0 !important;
 }
 :is(.hero, .Hero, [data-section*="hero"]) :is(.ctaRow, [class*="cta"]) > * {
 min-width: 0 !important;
 }
}