/* ═══════════════════════════════════════════════════════════════════════
   NOGO Media — Colors & Type
   Derived from globals.css + Tailwind usage in nogo-web (main).
   Palette: pure monochrome. Black, white, and the Tailwind gray ramp.
   Accent = the literal brand mark (not a color). Signals = minimal semantic chips.
   ═══════════════════════════════════════════════════════════════════════ */

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

:root {
  /* ─── Core neutrals ───────────────────────────────────────────── */
  --color-black:   #000000;
  --color-white:   #ffffff;

  /* Tailwind gray ramp — used across site, hero dashboard, demo UI */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;   /* scrollbar thumb */
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --gray-950: #030712;   /* dark sections: footer, security, CTA panel */

  /* ─── Surfaces (semantic) ─────────────────────────────────────── */
  --bg-page:         var(--color-white);
  --bg-subtle:       var(--gray-50);   /* alt. section backgrounds */
  --bg-inverse:      var(--gray-950);  /* Security section, Footer, CTA panel */
  --bg-dashboard:    var(--gray-950);  /* hero dashboard mock */
  --bg-card:         var(--color-white);
  --bg-card-subtle:  var(--gray-50);   /* feature cards */

  /* ─── Foreground (semantic) ───────────────────────────────────── */
  --fg-primary:   #111111;            /* body text, from --foreground */
  --fg-secondary: var(--gray-600);    /* supporting copy */
  --fg-muted:     var(--gray-500);    /* large paragraphs under H2 */
  --fg-subtle:    var(--gray-400);    /* eyebrows, metadata */
  --fg-faint:     var(--gray-300);    /* placeholders, dividers */
  --fg-on-dark:   var(--color-white);
  --fg-on-dark-muted: var(--gray-400);

  /* ─── Borders ─────────────────────────────────────────────────── */
  --border-hair:    var(--gray-100);  /* nav underline */
  --border-default: var(--gray-200);  /* cards, inputs, buttons */
  --border-strong:  var(--gray-300);  /* hover state */
  --border-dark:    var(--gray-800);  /* dashboard + dark sections */
  --border-dark-strong: var(--gray-700);

  /* ─── Signal colors (used ONLY for status dots & state chips) ── */
  --signal-live:    #22c55e;          /* green-500 "Live" pulse, Tilldelad */
  --signal-info:    #3b82f6;          /* blue-500 På väg, Upphämtning */
  --signal-warn:    #f59e0b;          /* amber-500 Väntar, avvikelse */
  --signal-done:    #6b7280;          /* gray-500 Levererad */
  --signal-drop:    #10b981;          /* emerald-500 Avlämning pin */

  /* Priority chips from DemoOrderTable (soft fills) */
  --chip-normal-bg:   var(--gray-100);   --chip-normal-fg:   var(--gray-700);
  --chip-dhl-bg:      #fee2e2;           --chip-dhl-fg:      #b91c1c;   /* red-100/700 */
  --chip-husq-bg:     #ffedd5;           --chip-husq-fg:     #c2410c;   /* orange-100/700 */
  --chip-express-bg:  #f3e8ff;           --chip-express-fg:  #7e22ce;   /* purple-100/700 */
  --chip-block-bg:    #faf5ff;           --chip-block-fg:    #7e22ce;   /* purple-50/700 */

  /* KPI card accent tints (DemoKPICards) */
  --kpi-blue-bg:   #eff6ff;  --kpi-blue-fg:   #2563eb;
  --kpi-green-bg:  #f0fdf4;  --kpi-green-fg:  #16a34a;
  --kpi-amber-bg:  #fffbeb;  --kpi-amber-fg:  #d97706;
  --kpi-purple-bg: #faf5ff;  --kpi-purple-fg: #9333ea;

  /* ─── Focus / overlay ────────────────────────────────────────── */
  --ring:           rgba(0,0,0,0.08);
  --overlay-backdrop: rgba(17,24,39,0.55);

  /* ─── Elevation (extremely restrained) ───────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);   /* hero dashboard only */

  /* ─── Radii (Tailwind scale, as used) ────────────────────────── */
  --radius-xs:    4px;   /* tiny inline chips, tags inside table */
  --radius-sm:    6px;
  --radius-md:    8px;   /* rounded-lg: buttons inside UI, filter chips */
  --radius-lg:   12px;   /* rounded-xl: cards, inputs */
  --radius-xl:   16px;   /* rounded-2xl: feature cards, hero dashboard */
  --radius-2xl:  24px;   /* rounded-3xl: CTA panel */
  --radius-full: 9999px; /* pill CTAs, badges */

  /* ─── Spacing ramp (Tailwind @ 4px base) ─────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;   /* common py between marketing sections */
  --space-24: 96px;
  --space-32: 128px;  /* md:py-32 — the standard section rhythm */

  --container-max: 1280px;   /* max-w-7xl */
  --container-px:  24px;     /* px-6 */

  /* ─── Type system ────────────────────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Display/heading scale — matches Tailwind text-* used in Hero & sections */
  --fs-display-xl: clamp(2.5rem, 5vw + 1rem, 4.5rem);  /* 40–72px — Hero h1 */
  --fs-display-lg: clamp(2rem, 3vw + 1rem, 3rem);      /* 32–48px — Section h2 */
  --fs-display-md: 1.875rem;  /* 30px */
  --fs-h3:     1.125rem;  /* 18px — card titles */
  --fs-lg:     1.125rem;  /* 18px — lead body */
  --fs-body:   1rem;      /* 16px */
  --fs-sm:     0.875rem;  /* 14px */
  --fs-xs:     0.75rem;   /* 12px — eyebrows, metadata */
  --fs-2xs:    0.625rem;  /* 10px — uppercase labels, pill tags */

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-relax:  1.65;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.1em;     /* uppercase eyebrows */
}

/* ════════════════════════════════════════════════════════════════════════
   Base typography
   ════════════════════════════════════════════════════════════════════════ */

html { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}

/* Semantic type — from nogo-web usage */
.nogo-h1 {
  font-size: var(--fs-display-xl);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.nogo-h2 {
  font-size: var(--fs-display-lg);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
.nogo-h3 {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-snug);
}
.nogo-eyebrow {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg-subtle);
  letter-spacing: 0;
}
.nogo-eyebrow-upper {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.nogo-lead {
  font-size: var(--fs-lg);
  color: var(--fg-muted);
  line-height: var(--lh-relax);
}
.nogo-body {
  font-size: var(--fs-body);
  color: var(--fg-primary);
  line-height: var(--lh-normal);
}
.nogo-body-muted {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  line-height: var(--lh-relax);
}
.nogo-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-secondary);
}

/* Patterns pulled directly from globals.css ─────────────────────────── */

.grid-pattern {
  background-image:
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

.dark-grid-pattern {
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fade-in-up 0.6s ease-out forwards; }