/* ===========================================================================
   Logistics Network — Design Tokens
   Original palette blending cool data-tech (AusData) + hot editorial gaming
   (The Lobby). Deep cool-charcoal base, electric cyan-teal signature accent,
   hot amber CTA. Resource types each get a distinct hue.
   =========================================================================== */

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

:root {
  /* ---- Base surfaces (cool-tinted near-black) ---- */
  --bg-0:        oklch(0.145 0.02 250);   /* deepest */
  --bg-1:        oklch(0.175 0.022 250);  /* page */
  --bg-2:        oklch(0.205 0.024 250);  /* raised panel */
  --bg-3:        oklch(0.245 0.026 250);  /* card / hover */
  --line:        oklch(0.32 0.03 250);    /* hairline borders */
  --line-soft:   oklch(0.28 0.025 250 / 0.6);

  /* ---- Foreground ---- */
  --fg:          oklch(0.96 0.008 250);
  --fg-dim:      oklch(0.78 0.015 250);
  --fg-mute:     oklch(0.62 0.02 250);
  --fg-faint:    oklch(0.50 0.02 250);

  /* ---- Signature accents (configurable by Tweaks) ---- */
  --accent:      oklch(0.82 0.15 195);    /* electric cyan-teal */
  --accent-2:    oklch(0.74 0.18 48);     /* hot amber CTA */
  --accent-ink:  oklch(0.16 0.04 220);    /* text on accent */
  --accent-wash: oklch(0.82 0.15 195 / 0.08);
  --amber-wash:  oklch(0.74 0.18 48 / 0.08);

  /* ---- Resource-type colors ---- */
  --type-item:     oklch(0.80 0.16 75);   /* amber */
  --type-fluid:    oklch(0.74 0.14 232);  /* cyan-blue */
  --type-energy:   oklch(0.68 0.21 25);   /* red (FE convention) */
  --type-chemical: oklch(0.82 0.18 142);  /* lime-green */
  --type-source:   oklch(0.70 0.19 312);  /* violet */

  --state-error:   var(--type-energy);
  --state-warning: var(--type-item);
  --state-success: var(--type-chemical);
  --state-info:    var(--type-fluid);
  --state-error-bg:   oklch(0.68 0.21 25 / 0.10);
  --state-warning-bg: oklch(0.80 0.16 75 / 0.10);
  --state-success-bg: oklch(0.82 0.18 142 / 0.10);
  --state-info-bg:    oklch(0.74 0.14 232 / 0.10);

  /* ---- Mode colors ---- */
  --mode-import: var(--type-fluid);
  --mode-export: var(--type-item);

  /* ---- Type ---- */
  --font-display: 'Saira', system-ui, sans-serif;
  --font-body:    'Sora', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --text-2xs: 0.625rem;
  --text-xs: 0.6875rem;
  --text-sm: 0.75rem;
  --text-md: 0.8125rem;
  --text-ui: 0.875rem;
  --text-body: 1rem;
  --text-lead: 1.0625rem;
  --text-card-title: 1.25rem;
  --text-panel-title: 1.625rem;
  --text-section-title: 3.25rem;
  --text-hero: 5.75rem;

  /* ---- Geometry ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 72px);

  /* ---- Glow ---- */
  --glow-accent: 0 0 40px -8px var(--accent);
  --shadow-card: 0 24px 60px -28px oklch(0 0 0 / 0.8), 0 2px 0 0 oklch(1 0 0 / 0.02) inset;
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-kerning: normal;
  font-optical-sizing: auto;
  background: var(--bg-1);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Technical grid + radial glow atmosphere on the page */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 80% -5%, oklch(0.82 0.15 195 / 0.10), transparent 60%),
    radial-gradient(700px 500px at 5% 8%, oklch(0.74 0.18 48 / 0.07), transparent 55%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(oklch(1 0 0 / 0.022) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.022) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 100%);
}

#root { position: relative; z-index: 1; }

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

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 8px; border: 2px solid var(--bg-0); }
::-webkit-scrollbar-thumb:hover { background: var(--line); }

/* ---- Reusable primitives ---- */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.kicker::before {
  content: '';
  width: 22px; height: 1px;
  background: var(--accent);
  box-shadow: var(--glow-accent);
}

.section-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; margin: 0; line-height: 1; letter-spacing: 0; text-wrap: balance; }

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