/* AgriBagz — custom.css
   Ports the design tokens & utility classes from the original Next.js
   app/globals.css into plain CSS for use alongside the Tailwind CDN build. */

:root{
  color-scheme: dark;
  --color-background: #0A0A0A;
  --color-foreground: #FAFAFA;
  --color-primary: #E8E4DC;
  --color-primary-foreground: #0A0A0A;
  --color-accent: #C9A96E;
  --color-accent-foreground: #0A0A0A;
  --color-muted: #141414;
  --color-muted-foreground: #737373;
  --color-border: #262626;
  --color-card: #111111;
  --color-card-foreground: #FAFAFA;
  --color-destructive: #EF4444;

  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-heading: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Space Grotesk', ui-monospace, monospace;
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body{ margin:0; padding:0; min-height:100%; }

body{
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

main{ display:block; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button, input, textarea, select{ font: inherit; }

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

::selection{ background-color: var(--color-accent); color: var(--color-accent-foreground); }

.font-heading{ font-family: var(--font-heading); }
.font-mono{ font-family: var(--font-mono); }

.text-balance{ text-wrap: balance; }

.glass{
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.06);
}
.glass-strong{
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.08);
}
.text-gradient{
  background: linear-gradient(135deg,#FAFAFA 0%, #C9A96E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mask-fade-bottom{
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}
.text-outline{
  -webkit-text-stroke: 1px rgba(255,255,255,0.15);
  -webkit-text-fill-color: transparent;
}
.page-shell{ padding-top: 7rem; padding-bottom: 5rem; }

/* Lenis smooth scroll */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior: auto !important; }

/* Custom scrollbar */
::-webkit-scrollbar{ width:6px; }
::-webkit-scrollbar-track{ background: var(--color-background); }
::-webkit-scrollbar-thumb{ background:#333; border-radius:3px; }
::-webkit-scrollbar-thumb:hover{ background: var(--color-accent); }

/* Editorial typography */
.editorial-h1{ font-size: clamp(3rem, 8vw, 8rem); line-height: 0.95; letter-spacing: -0.04em; }
.editorial-h2{ font-size: clamp(2rem, 5vw, 5rem); line-height: 1; letter-spacing: -0.03em; }
.editorial-h3{ font-size: clamp(1.5rem, 3vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; }
.editorial-body{ font-size: clamp(1rem, 1.2vw, 1.25rem); line-height: 1.7; letter-spacing: 0.01em; }

/* ---------- Color utility classes (ports the Tailwind v4 @theme tokens) ---------- */
.bg-background{ background-color: var(--color-background); }
.bg-muted{ background-color: var(--color-muted); }
.bg-card{ background-color: var(--color-card); }
.bg-accent{ background-color: var(--color-accent); }
.bg-foreground{ background-color: var(--color-foreground); }
.bg-primary{ background-color: var(--color-primary); }
.text-foreground{ color: var(--color-foreground); }
.text-background{ color: var(--color-background); }
.text-muted-foreground{ color: var(--color-muted-foreground); }
.text-accent{ color: var(--color-accent); }
.text-accent-foreground{ color: var(--color-accent-foreground); }
.text-destructive{ color: var(--color-destructive); }
.border-border{ border-color: var(--color-border); }
.border-accent{ border-color: var(--color-accent); }
.divide-border > * + *{ border-color: var(--color-border); }
.hover\:text-foreground:hover{ color: var(--color-foreground); }
.hover\:text-accent:hover{ color: var(--color-accent); }
.hover\:border-accent:hover{ border-color: var(--color-accent); }
.hover\:bg-muted:hover{ background-color: var(--color-muted); }
.hover\:bg-foreground:hover{ background-color: var(--color-foreground); }
.hover\:bg-accent:hover{ background-color: var(--color-accent); }
.hover\:bg-white:hover{ background-color: #fff; }
.hover\:text-background:hover{ color: var(--color-background); }
.focus\:border-accent:focus{ border-color: var(--color-accent); }

/* ---------- Section reveal (replaces framer-motion useInView) ---------- */
.reveal{
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 1s cubic-bezier(0.25,0.1,0.25,1), transform 1s cubic-bezier(0.25,0.1,0.25,1);
}
.reveal.reveal-left{ transform: translateX(80px); }
.reveal.reveal-right{ transform: translateX(-80px); }
.reveal.reveal-in{ opacity: 1; transform: translate(0,0); }

/* ---------- Buttons (ports components/ui/button.tsx variants) --------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  white-space:nowrap; font-size:.875rem; font-weight:500;
  transition: all .3s ease; cursor:pointer; border:none;
}
.btn-default{ background: var(--color-primary); color: var(--color-primary-foreground); }
.btn-default:hover{ background: rgba(232,228,220,.9); }
.btn-outline{ border:1px solid var(--color-border); background:transparent; color:var(--color-foreground); }
.btn-outline:hover{ background: var(--color-muted); }
.btn-accent{ background: var(--color-accent); color: var(--color-accent-foreground); }
.btn-accent:hover{ background: rgba(201,169,110,.9); }
.btn-lg{ height:3.5rem; padding:0 2.5rem; font-size:1rem; }
.btn-default-size{ height:3rem; padding:0 2rem; }

/* Magnetic button base (JS adds transform) */
.magnetic-btn{ transition: transform .15s cubic-bezier(0.34,1.56,0.64,1); will-change: transform; }

/* ---------- Form fields (ports components/ui/input & textarea) -------- */
.field-input, .field-select, .field-textarea{
  display:flex; width:100%; border:0; border-bottom:1px solid var(--color-border);
  background: transparent; padding: .75rem 0; font-size:1rem; color: var(--color-foreground);
  transition: border-color .2s ease; height:3.5rem;
}
.field-textarea{ height:auto; min-height:120px; resize:none; }
.field-input::placeholder, .field-textarea::placeholder{ color: var(--color-muted-foreground); }
.field-input:focus, .field-select:focus, .field-textarea:focus{ outline:none; border-color: var(--color-accent); }
.field-label{
  font-size:.7rem; font-weight:500; text-transform:uppercase; letter-spacing:.15em; color: var(--color-muted-foreground);
}
.field-select option{ background: var(--color-background); color: var(--color-foreground); }

/* Mobile nav */
.mobile-nav{ position:fixed; inset:0; z-index:40; background: var(--color-background); padding-top:6rem; padding-left:1.5rem; padding-right:1.5rem; display:none; }
.mobile-nav.open{ display:block; }

/* Nav link underline */
.nav-link{ position:relative; }
.nav-link .underline-anim{ position:absolute; bottom:-4px; left:0; width:0; height:1px; background: var(--color-accent); transition: width .3s ease; }
.nav-link:hover .underline-anim{ width:100%; }

/* Spec grid divider background used by Engineering section */
.spec-grid{ background: var(--color-border); }

/* Simple fade-in for hero on load */
.fade-up-init{ opacity:0; transform: translateY(60px); }
.fade-up-in{ opacity:1; transform: translateY(0); transition: opacity 1.2s ease, transform 1.2s ease; }

@media (prefers-reduced-motion: reduce){
  .reveal, .fade-up-init{ transition: none !important; opacity:1 !important; transform:none !important; }
}