/* ==========================================================================
   BanSek Trade — design tokens
   Single source of truth for colour, type, spacing, motion and layout.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------- */
  --bs-lime: #ccf90c;
  --bs-lime-dim: #a8ce0a;
  --bs-lime-glow: rgba(204, 249, 12, 0.14);

  /* --- Dark surfaces ------------------------------------------------------ */
  --bs-black: #050505;
  --bs-carbon: #0c0e10;
  --bs-steel: #14171a;
  --bs-steel-2: #1c2025;
  --bs-line: #262b31;

  /* --- Ink ---------------------------------------------------------------- */
  --bs-white: #ffffff;
  --bs-silver: #c9cfd6;
  --bs-gray: #7c8590;
  --bs-gray-dim: #4a525c;

  /* --- Signal ------------------------------------------------------------- */
  --bs-warn: #ff5f1f;
  --bs-error: #c1121f; /* 6.1:1 on --bs-paper, where every form lives */

  /* --- Light-section surfaces (inverted bands only) ----------------------- */
  --bs-paper: #f2f3f5;
  --bs-paper-2: #e6e8eb;
  --bs-paper-line: #d3d7dc;

  /* --- Semantic aliases: flipped wholesale by .section--light ------------- */
  --surface: var(--bs-black);
  --surface-raised: var(--bs-steel);
  --surface-input: var(--bs-steel-2);
  --hairline: var(--bs-line);
  --ink: var(--bs-white);
  --ink-body: var(--bs-silver);
  --ink-muted: var(--bs-gray);
  --ink-faint: var(--bs-gray-dim);

  /* `--accent` fills, `--accent-ink` writes. On paper the raw lime fails AA as
     text, so the light band darkens the text-accent while keeping the fill. */
  --accent: var(--bs-lime);
  --accent-ink: var(--bs-lime);

  /* --- Type --------------------------------------------------------------- */
  --font-display: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter Tight", "Inter Tight Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid scale. Mobile-first: every step is authored at 360px, then grows. */
  /* Phase 1.1: display cut by exactly 25% at every stop so the H1 stops
     crowding the search module (was clamp(38px, 9vw, 104px)). */
  --fs-display: clamp(29px, 6.75vw, 78px);
  /* Inner-page H1: below the homepage display, above a section title, so an
     inner page never competes with the homepage for weight. */
  --fs-h1-page: clamp(30px, 5.2vw, 58px);
  --fs-h2: clamp(30px, 5.4vw, 60px);
  --fs-h3: clamp(21px, 2.6vw, 30px);
  --fs-h4: clamp(17px, 1.7vw, 20px);
  --fs-lead: clamp(16px, 1.75vw, 21px);
  --fs-body: clamp(15px, 1.2vw, 17px);
  --fs-small: clamp(13px, 1vw, 14px);
  --fs-micro: clamp(10px, 0.85vw, 12px);

  --lh-tight: 0.98;
  --lh-heading: 1.08;
  --lh-body: 1.62;

  --ls-display: -0.035em;
  --ls-h2: -0.028em;
  --ls-h3: -0.018em;
  --ls-body: -0.01em;
  --ls-mono: 0.16em;

  /* --- Layout -------------------------------------------------------------- */
  --gutter: clamp(20px, 5vw, 64px);
  --container: min(1320px, 100% - 2 * var(--gutter));
  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* Vertical rhythm — one scale used by every band so sections never fight. */
  --section-pad: clamp(72px, 11vw, 160px);
  --section-pad-tight: clamp(48px, 7vw, 96px);
  --stack-xs: 8px;
  --stack-sm: 16px;
  --stack-md: clamp(20px, 3vw, 32px);
  --stack-lg: clamp(32px, 5vw, 56px);
  --stack-xl: clamp(48px, 7vw, 88px);

  /* --- Motion ---------------------------------------------------------------
     Four curves, one job each. Nothing on this site uses an easing value that
     is not one of these — inconsistent easing is the fastest way to make a
     page feel assembled rather than designed. Mirrored as GSAP eases in
     js/easing.js under the same names. */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* entrances, reveals */
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1); /* transitions, the slider */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* hover, micro-interaction */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* buttons only */

  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 620ms;

  /* --- Hero slider ----------------------------------------------------------- */
  --slide-dur: 6500ms;
  --slide-fade: 1100ms;
  --arrow-idle: 1800ms;

  /* --- Depth ---------------------------------------------------------------- */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03), 0 18px 40px -24px rgba(0, 0, 0, 0.9);
  --shadow-pop: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
  --focus-ring: 0 0 0 2px var(--bs-black), 0 0 0 4px var(--bs-lime);

  /* --- Chrome --------------------------------------------------------------- */
  --nav-h: 72px;
  /* Stacking: the navbar sits ABOVE the mobile menu so the burger stays
     reachable to close it, but BELOW the search overlay, which brings its own
     close button and is meant to blank the whole chrome. */
  --z-widget: 500;
  --z-menu: 600;
  --z-nav: 700;
  --z-overlay: 800;
  --z-preloader: 9999;
}

@media (min-width: 900px) {
  :root {
    --nav-h: 92px;
  }
}

/* Inverted bands. Swapping only the semantic aliases keeps every component
   colour-agnostic — no component needs a `.section--light &` override.

   `.panel` is the same flip under a different name: in the B2B portal it wraps
   every table of part numbers and prices, which are read, compared and
   transcribed. That is a legibility job, not a mood job. Same tokens, so a
   button or a form field lands identically in either context. */
.section--light,
.panel {
  --surface: var(--bs-paper);
  --surface-raised: var(--bs-white);
  --surface-input: var(--bs-white);
  --hairline: var(--bs-paper-line);
  --ink: var(--bs-black);
  --ink-body: #3c434b;
  --ink-muted: #5d666f;
  --ink-faint: #8b939c;
  --accent: var(--bs-lime);
  --accent-ink: #566e04; /* 5.6:1 on --bs-paper */
  --focus-ring: 0 0 0 2px var(--bs-white), 0 0 0 4px #6f8a05;
}