/* ============================================================
   FULFILD — Global stylesheet & brand tokens
   Distribution management software · by Whitedash

   This file holds ONLY shared/global rules: design tokens, reset,
   layout helpers, typography, buttons, the eyebrow system, section
   textures and the scroll-reveal system. Every section's own rules
   live in that component's scoped <style> block.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Brand */
  --ink:          #111B28;
  --ink-2:        #172333;
  --brand:        #1A3A5C;
  --brand-600:    #234E7A;
  --brand-mid:    #2C5680;
  --brand-line:   rgba(148,186,226,0.15);

  /* Accent */
  --accent:       #94BAE2;
  --accent-600:   #7AAED9;
  --accent-200:   #C8DCF0;
  --accent-tint:  #EAF2FA;

  /* Status */
  --status-placed:       #6B7787;
  --status-dispatch:     #94BAE2;
  --status-delivered:    #53B594;
  --status-delivered-bg: #E4F5EE;

  /* Light surfaces */
  --bg:           #F7F4EE;
  --bg-2:         #F0EDE5;
  --surface:      #FFFFFF;
  --line:         #E5E0D6;
  --line-strong:  #D5CFBF;

  /* Text */
  --text:         #14202E;
  --text-2:       #44505F;
  --muted:        #6B7787;
  --on-dark:      #EEF2F7;
  --on-dark-2:    #A4B8CC;
  --on-dark-mut:  #6E85A0;

  /* Typography */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* Shadow */
  --shadow-sm:   0 1px 2px rgba(10,19,34,.06), 0 1px 3px rgba(10,19,34,.05);
  --shadow-md:   0 4px 16px rgba(10,19,34,.08), 0 1px 4px rgba(10,19,34,.05);
  --shadow-lg:   0 24px 60px -20px rgba(10,19,34,.30), 0 8px 24px -12px rgba(10,19,34,.18);
  --shadow-card: 0 18px 50px -24px rgba(10,19,34,.45);

  /* Layout */
  --maxw:   1200px;
  --gutter: clamp(20px, 5vw, 56px);

  /* ---- Derived helpers (non-amber) required by the migrated styles ----
     These are not part of the canonical palette above; they exist only so
     no migrated rule resolves to an undefined custom property. */
  --on-dark-strong:   #FFFFFF;            /* white text on dark surfaces */
  --on-accent:        #0E1B2A;            /* ink text on accent fills */
  --brand-line-2:     rgba(148,186,226,0.28);
  --brand-line-solid: #25405D;
  --danger:           #E5564E;
  --danger-ink:       #C73A33;
  /* dashboard chrome (PlatformDemo) */
  --app-bg:     #0E1825;
  --app-bar:    #0C1623;
  --app-panel:  #152A41;
  --app-line:   #1B3149;
  --app-search: rgba(26,51,81,0.4);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
body.no-scroll { overflow: hidden; }

/* ---------- Layout helpers ---------- */
/* Single section content wrapper — the ONE width constraint used by every
   section across every page. Section backgrounds stay full-bleed; only this
   inner .container is constrained. Nothing else should set a competing
   max-width on a section wrapper. */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 9vw, 132px); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.dark { background: var(--ink); color: var(--on-dark); }
.dark-2 { background: var(--brand); color: var(--on-dark); }

/* ---------- Eyebrow (shared) ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-mid);
  display: inline-flex;
  align-items: center;
  gap: .6em;
}
.dark .eyebrow, .dark-2 .eyebrow, .hero .eyebrow, .case .eyebrow, .form-wrap .eyebrow { color: var(--accent); }
.eyebrow::before {
  content: ""; width: 22px; height: 2px; background: currentColor; opacity: .9;
}
/* Eyebrow line draw — wired to the reveal/is-visible system (see Motion).
   The bare-page (no-JS) default keeps the rule fully drawn. */
html.js .eyebrow::before { transform: scaleX(0); transform-origin: left center; transition: transform .55s ease .15s; }
html.js [data-reveal]:not(.reveal-hidden) .eyebrow::before,
html.js .eyebrow[data-reveal]:not(.reveal-hidden)::before,
html.js .is-visible .eyebrow::before { transform: scaleX(1); }

/* ---------- Headings & shared type ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; color: var(--text); }
.dark h1, .dark h2, .dark h3, .dark h4, .dark-2 h2, .dark-2 h3,
.hero h1, .hero h2, .case h2, .case h3, .form-wrap h2, .form-wrap h3 { color: var(--on-dark-strong); }

.h-display { font-size: clamp(2.6rem, 6.2vw, 4.6rem); line-height: .98; letter-spacing: -.03em; }
.h-section { font-size: clamp(2rem, 4.2vw, 3.1rem); }
.h-sub { font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-family: var(--font-body); font-weight: 400; line-height: 1.55; color: var(--text-2); letter-spacing: 0; }
.dark .h-sub, .dark-2 .h-sub, .hero .h-sub, .form-wrap .h-sub { color: var(--on-dark-2); }
.lead { max-width: 44ch; }

.section-head { max-width: 62ch; }
.section-head .h-section { margin-top: 18px; text-wrap: balance; }
.section-head .h-sub { margin-top: 18px; }

/* ---------- Buttons (shared) ---------- */
.btn {
  --pad-y: 14px; --pad-x: 24px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: var(--pad-y) var(--pad-x);
  font-family: var(--font-display);
  font-weight: 600; font-size: .98rem; letter-spacing: -.01em;
  border-radius: var(--r-sm); border: 1px solid transparent;
  cursor: pointer; transition: transform .12s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 6px 18px -6px rgba(148,186,226,.6); }
.btn-primary:hover { background: var(--accent-600); box-shadow: 0 10px 26px -8px rgba(148,186,226,.7); }

.btn-ghost { background: transparent; color: var(--on-dark); border-color: rgba(234,240,247,.28); }
.btn-ghost:hover { border-color: rgba(234,240,247,.6); background: rgba(234,240,247,.06); }

.btn-dark { background: var(--brand); color: var(--on-dark-strong); }
.btn-dark:hover { background: var(--brand-600); }

.btn-outline { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--text); background: var(--surface); }

.btn-lg { --pad-y: 17px; --pad-x: 30px; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* ---------- Brand lockup wrapper (shared header + footer) ---------- */
.brand-lockup { display: flex; align-items: center; gap: 12px; }

/* ---------- Trust row (shared hero + contact form) ---------- */
.trust-row { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 38px; }
.trust-row li { display: flex; align-items: center; gap: 9px; font-size: .86rem; color: var(--on-dark-2); list-style: none; }
.trust-row svg { width: 16px; height: 16px; color: var(--accent); flex: none; }

/* ---------- Section textures (shared) ---------- */
.texture-dots, .texture-blueprint, .texture-net { position: relative; }
.texture-dots > .container, .texture-blueprint > .container, .texture-net > .container { position: relative; z-index: 1; }
/* problem (light): fine technical dot-grid */
.texture-dots::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(26,58,92,.09) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
/* features (dark): blueprint grid */
.texture-blueprint::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(148,186,226,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,186,226,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(130% 100% at 50% 0%, #000, transparent 82%);
          mask-image: radial-gradient(130% 100% at 50% 0%, #000, transparent 82%);
}
/* case study (dark): supply-chain constellation lives in CaseStudy.astro (.case-net) */

/* ---------- Scroll reveal (hide class is ADDED by JS; default state is
   always visible → content never blank for no-JS users) ---------- */
[data-reveal] { transition: opacity .6s ease, transform .6s ease; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }
html.js [data-reveal].reveal-hidden { opacity: 0; transform: translateY(24px); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html.js [data-reveal].reveal-hidden { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}