/*
 * Pickle design tokens.
 *
 * Source of truth: BANX-DA/Pickle Site v4 - Editorial + the Design Sync doc.
 * The rules that shape every value below:
 *
 *   - One accent. #00E788 does all the accent work; #7DFFBF exists for hover
 *     emphasis only, #F4A300 marks risk and "soon" states. Nothing else is a
 *     colour.
 *   - One hairline. rgba(255,255,255,.14) is the only border weight — not four
 *     shades of almost the same grey.
 *   - Flat surfaces, 2px radius, no gradients, no glows, no shadows. The old
 *     token names for shadows and edges still exist so nothing breaks, but they
 *     all resolve to `none`.
 *   - Content is present on arrival: no entrance-animation tokens.
 *
 * The --banx-* names are the stable API every stylesheet consumes; the values
 * are the Pickle language. Retired hues (cyan/violet/blue) are mapped onto the
 * green ramp so any stray reference stays on-palette instead of breaking.
 */
:root {
  color-scheme: dark;

  /* ---------------------------------------------------------------- surfaces */
  --banx-bg: #1a1a1a;
  --banx-bg-deep: #161816;
  --banx-surface-1: #1c1c1c;
  --banx-surface-2: #1e1e1e;
  --banx-surface-3: #212121;
  --banx-surface-4: #262626;
  --banx-surface-input: #161816;
  --banx-surface-hover: rgb(255 255 255 / 5%);

  /* ------------------------------------------------------------------- lines
   * One weight. The three old names survive so nothing 404s, but they are the
   * same hairline on purpose.
   */
  --banx-line: rgb(255 255 255 / 14%);
  --banx-line-soft: rgb(255 255 255 / 14%);
  --banx-line-strong: rgb(255 255 255 / 14%);

  /* --------------------------------------------------------------------- ink */
  --banx-text: #ffffff;
  --banx-muted: #9aa3a0;
  --banx-subtle: #6b7370;
  --banx-faint: #5c635f;

  /* ------------------------------------------------------------------ accent */
  --banx-mint: #00e788;
  --banx-mint-strong: #00f46f;
  --banx-mint-dim: #12db86;
  --banx-mint-ink: #0d1210;
  --banx-mint-soft: rgb(0 231 136 / 7%);
  --banx-mint-line: rgb(0 231 136 / 35%);
  --banx-mint-hi: #7dffbf;

  /* Risk and "soon" states. */
  --banx-amber: #f4a300;
  --banx-amber-soft: rgb(244 163 0 / 6%);
  --banx-amber-line: rgb(244 163 0 / 28%);

  /* Errors only — never decoration. */
  --banx-rose: #ff5c5c;
  --banx-rose-soft: rgb(255 92 92 / 7%);
  --banx-rose-line: rgb(255 92 92 / 32%);

  /* Retired hues, folded onto the green ramp so stray uses stay coherent. */
  --banx-cyan: #7dffbf;
  --banx-cyan-soft: rgb(125 255 191 / 8%);
  --banx-cyan-line: rgb(125 255 191 / 30%);
  --banx-violet: #cdffe7;
  --banx-violet-soft: rgb(205 255 231 / 8%);
  --banx-violet-line: rgb(205 255 231 / 30%);
  --banx-blue: #12db86;
  --banx-blue-soft: rgb(18 219 134 / 8%);
  --banx-blue-line: rgb(18 219 134 / 30%);

  --banx-focus: #00e788;

  /* Pipeline lane greens — each lane has its own pair, from the reference. */
  --banx-lane-mini: #80f048;
  --banx-lane-mini-idle: rgb(128 240 72 / 45%);
  --banx-lane-evm: #b8f898;
  --banx-lane-evm-idle: #60c848;
  --banx-lane-l1: #68f878;
  --banx-lane-l1-idle: #387838;

  /* ---------------------------------------------------------------- typography
   * Self-hosted (shared-ui/fonts/, latin subsets) so `font-src 'self'` holds.
   * Sora carries display work, Manrope carries body text, IBM Plex Mono carries
   * every label, figure and address.
   */
  --banx-font-display: "Sora", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --banx-font: "Manrope", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --banx-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo,
    Consolas, "Liberation Mono", monospace;

  --banx-text-2xs: .66rem;
  --banx-text-xs: .74rem;
  --banx-text-sm: .82rem;
  --banx-text-base: .9rem;
  --banx-text-md: .95rem;
  --banx-text-lg: 1.1rem;
  --banx-text-xl: 1.3rem;
  --banx-text-2xl: clamp(1.4rem, 2.4vw, 1.7rem);
  --banx-text-3xl: clamp(1.95rem, 4vw, 3.1rem);
  --banx-text-display: clamp(2.9rem, 6.2vw, 5.2rem);

  --banx-tracking-tight: -.02em;
  --banx-tracking-display: -.035em;
  --banx-tracking-caps: .18em;
  --banx-tracking-caps-wide: .22em;

  /* ------------------------------------------------------------------ spacing */
  --banx-space-1: .25rem;
  --banx-space-2: .5rem;
  --banx-space-3: .75rem;
  --banx-space-4: 1rem;
  --banx-space-5: 1.5rem;
  --banx-space-6: 2rem;
  --banx-space-7: 3.5rem;
  --banx-space-8: 5rem;

  /* Editorial rhythm, taken from the reference page: sections breathe at 120px,
   * the hero opens at 132px, a section header sits 56px above its content and
   * its eyebrow 22px above the headline. This vertical scale is most of what
   * separates an editorial page from a dashboard. */
  --banx-section: 120px;
  --banx-section-sm: 88px;
  --banx-hero-top: 132px;
  --banx-hero-bottom: 110px;
  --banx-sechead-gap: 56px;
  --banx-kicker-gap: 22px;

  /* -------------------------------------------------------------------- shape
   * Flat editorial: 2px everywhere. The old size names survive but agree.
   */
  --banx-radius-xs: 2px;
  --banx-radius-sm: 2px;
  --banx-radius: 2px;
  --banx-radius-lg: 2px;
  --banx-radius-xl: 2px;
  --banx-radius-pill: 2px;

  /* ---------------------------------------------------------- deleted effects
   * Kept as names so nothing breaks; deleted as effects on purpose.
   */
  --banx-shadow-1: none;
  --banx-shadow-2: none;
  --banx-shadow-3: none;
  --banx-glow: none;
  --banx-edge: none;

  /* ------------------------------------------------------------------- motion */
  --banx-ease: cubic-bezier(.16, 1, .3, 1);
  --banx-fast: 120ms;
  --banx-base: 180ms;
  --banx-slow: 300ms;

  /* -------------------------------------------------------------------- layout */
  --banx-content: 77.5rem;   /* 1240px */
  --banx-content-app: 60rem;
  --banx-gutter: clamp(1rem, 4vw, 1.5rem);
  --banx-nav-h: 72px;
  --banx-bar-h: 48px;
  --banx-tap: 44px;

  /* ------------------------------------------------------------------- z-index */
  --banx-z-nav: 100;
  --banx-z-bar: 99;
  --banx-z-menu: 110;
  --banx-z-modal: 120;
  --banx-z-progress: 200;
  --banx-z-skip: 210;

  /* ------------------------------------------------------- compatibility aliases */
  --bg: var(--banx-bg);
  --card: var(--banx-surface-1);
  --card-2: var(--banx-surface-1);
  --ink: var(--banx-text);
  --muted: var(--banx-muted);
  --muted-2: var(--banx-subtle);
  --line: var(--banx-line);
  --primary: var(--banx-mint);
  --primary-dim: var(--banx-mint-dim);
  --cyan: var(--banx-cyan);
  --purple: var(--banx-violet);
  --ok: var(--banx-mint);
  --bad: var(--banx-rose);
  --warn: var(--banx-amber);
  --radius: var(--banx-radius);
}