/* ============================================================================
   bridge.css — remap the legacy ui-library / style.css design tokens to the new
   "striped by design" palette (skunk-yellow on charcoal). Loaded AFTER the
   legacy sheets and primary.css so that pages still built on the legacy classes
   (account, services, oauth, developer, admin, view/decrypt, etc.) inherit the
   new look without being individually rewritten.
   ============================================================================ */
:root{
  /* accent → skunk yellow (the one loud color) */
  --color-accent-primary:#f5c518;  --accent-primary:#f5c518;
  --color-accent-hover:#ffd84d;    --accent-hover:#ffd84d;
  --color-accent-secondary:#f7d873; --accent-secondary:#f7d873;
  --color-skunk-purple:#f5c518;    /* historical "purple" brand var → yellow */
  --color-skunk-white:#f3f3f7;

  /* brand HSL (yellow ≈ hsl(48,91%,53%)) */
  --brand-hue:48; --brand-saturation:91%; --brand-lightness:53%;
  --brand-primary:#f5c518; --brand-rgb:245,197,24;
  --brand-primary-dark:#8a6b00; --brand-primary-light:#ffd84d;
  --brand-primary-subtle:rgba(245,197,24,.12);

  /* surfaces → charcoal */
  --color-bg-primary:#0c0d11;   --bg-primary:#0c0d11;
  --color-bg-secondary:#121319;
  --color-bg-tertiary:#181a22;
  --color-bg-card:#181a22;
  --color-bg-hover:#20222c;

  /* text */
  --color-text-primary:#f3f3f7; --text-primary:#f3f3f7;
  --color-text-secondary:#b4b6c2;
  --color-text-muted:#7e8190;

  /* borders */
  --color-border:#313542;
  --color-border-light:#2b2e3a;

  /* status */
  --color-success:#3ad6a0;
  --color-error:#f45668;
  --color-warning:#f5b945;
  --color-info:#f5c518;

  /* type → mono-first body */
  --font-family-sans:'JetBrains Mono',ui-monospace,monospace;
  --font-family-mono:'JetBrains Mono',ui-monospace,monospace;
}

/* ---------------------------------------------------------------------------
   Landing API section — keep the curl code blocks from overflowing the mobile
   viewport. The legacy .code-block sits inside the design .api-grid/.api-card
   grid+flex chain, whose default min-width:auto lets a long <pre> line blow out
   the track. Pin min-width:0 up the chain and let the <pre> scroll internally
   instead (mirrors the design's .term/.term-body behaviour).
   --------------------------------------------------------------------------- */
.api-grid,
.api-card{min-width:0}
.api-card .code-block{min-width:0;max-width:100%;overflow:hidden}
.api-card .code-block pre{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0;max-width:100%}
.api-card .code-block code{white-space:pre;word-break:normal}