/*
 * Pickle design tokens.
 *
 * Source of truth: docs/superpowers/specs/2026-08-26-pickle-scenes-design.md.
 * 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.
 *   - A near-black stage. #0A0A0B, because the home page is a sequence of scenes
 *     and a scene needs a stage - a lighter ground fights a canvas.
 *   - Flat surfaces, 2px radius, one hairline.
 *   - Two families: Inter Tight for display and body, IBM Plex Mono for every
 *     label, figure and address.
 *
 * The seven @property-registered colours below are the mechanism that lets
 * components.css paint through tokens rather than literals, so a section can
 * redefine its own ground. The cream paper register that used to invert them
 * went out with the editorial page it was designed for; it was carried as known
 * dead weight until the six app UIs were restyled, and that has now happened.
 *
 * The --banx-* names are the stable API every stylesheet consumes. Retired hues
 * (cyan/violet/blue) are mapped onto the green ramp so any stray reference
 * stays on-palette instead of breaking.
 */

/* ==================================================== animatable properties
 * Registration is not decoration. CSS interpolates a custom property only if it
 * has a declared syntax; an unregistered one is an untyped token and flips
 * between values at the midpoint instead of animating.
 *
 * Nothing animates these today - the arrival gesture in components.css moves
 * opacity and transform only - so registration now earns its place for the
 * other half of what it does: `inherits: true` means redefining one of them on
 * a single element re-grounds every descendant, and every .ex-* rule that reads
 * var(--banx-text) follows without being touched.
 *
 * The initial values are the resting state of the dark stage.
 */
@property --banx-ground { syntax: "<color>"; inherits: true; initial-value: #0a0a0b; }
@property --banx-text { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --banx-line { syntax: "<color>"; inherits: true; initial-value: rgb(255 255 255 / 14%); }
@property --banx-surface-1 { syntax: "<color>"; inherits: true; initial-value: #141416; }
@property --banx-muted { syntax: "<color>"; inherits: true; initial-value: #9aa3a0; }
@property --banx-subtle { syntax: "<color>"; inherits: true; initial-value: #6b7370; }
@property --banx-accent-text { syntax: "<color>"; inherits: true; initial-value: #00e788; }

:root {
  color-scheme: dark;

  /* ---------------------------------------------------------------- surfaces
   * #121212 rather than v1's #1a1a1a. The paper inversion needs contrast to
   * travel across, and a near-black ground makes the accent read as light
   * rather than as paint.
   */
  --banx-bg: #0a0a0b;
  --banx-bg-deep: #050506;
  --banx-surface-2: #18181b;
  --banx-surface-3: #1e1e22;
  --banx-surface-4: #26262b;
  --banx-surface-input: #050506;
  --banx-surface-hover: rgb(255 255 255 / 6%);

  /* ---------------------------------------------------------- register values
   * --banx-surface-1, --banx-line, --banx-text, --banx-muted, --banx-subtle and
   * --banx-accent-text are @property-registered above, and their ink values are
   * those initial-values.
   *
   * Do NOT redeclare them here. A declaration in :root would shadow the
   * registration's initial value, and the initial value is what a paper act
   * animates away from - so the inversion would start from a stale ink and the
   * unsupported-browser path would lose its resting state.
   */
  --banx-line-soft: var(--banx-line);
  --banx-line-strong: var(--banx-line);
  --banx-faint: #5c635f;

  /* Two allocation groups that are neither mint nor amber, and they are a GREY and
   * a SLATE rather than two greys.
   *
   * They were two greys, and the two blocks of the ring could not be told apart -
   * which is the whole failure. Lightness was doing all the work and there is not
   * enough of it: the darkest build grey against the lightest market grey came to
   * 1.79:1, the same as one step inside either pair, so the eye had nothing to go
   * on. Hue carries it instead.
   *
   * The hue is a VIOLET, and it was a slate first. A slate at 213 degrees reads as
   * a cool grey, which is close to the thing it had to be told apart from. Violet
   * at 253 sits at least 98 degrees from all three of the others.
   *
   * `--banx-group-build` is no longer a grey either: it is a cyan at 198 degrees,
   * which is what the ring asked for. That leaves the palette with no neutral in
   * the chart at all, and the cyan 43 degrees from the mint beside it - the
   * tightest pair on the wheel, and the reason 198 was picked over 191.
   *
   * Computed against #0a0a0b: #27a2d8 is 6.83:1 and #6f61a0 is 3.67:1, so both
   * clear the 3:1 a non-text graphic needs. #5c635f is --banx-faint's
   * value said again under its own name, because here it is paint, not a line. */
  --banx-group-build: #27a2d8;
  --banx-group-market: #6f61a0;

  /* ------------------------------------------------------------------ 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.
   * Inter Tight carries display AND body; IBM Plex Mono carries every label,
   * figure and address. Two families, because a scene is the subject and the
   * type should not compete with it.
   */
  --banx-font-display: "Inter Tight", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --banx-font: "Inter Tight", 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.12rem;
  --banx-text-xl: 1.35rem;
  --banx-text-2xl: clamp(1.5rem, 2.6vw, 2.1rem);

  /* One display step. The scene headlines set their own size in
   * web/public/css/scenes.css, because a stage is not a text column and its
   * type scales with the viewport rather than with the document. */
  --banx-text-3xl: clamp(1.9rem, 4.2vw, 3.2rem);
  --banx-text-display: clamp(2.4rem, 5.6vw, 4.4rem);

  --banx-tracking-tight: -.02em;
  /* A tight grotesque at display size wants real negative tracking; the leading
   * stays just under 1 so two lines read as one block. */
  --banx-tracking-display: -.04em;
  --banx-leading-display: .96;
  --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: 132px;
  --banx-section-sm: 88px;
  --banx-hero-top: 132px;
  --banx-hero-bottom: 110px;
  --banx-sechead-gap: 56px;
  --banx-kicker-gap: 22px;

  /* An act breathes wider than a section: an inversion boundary needs room or
   * it reads as a stripe rather than as a new argument. --banx-pin-track is the
   * scroll length a self-assembling diagram gets, and it is the single value to
   * tune if Act III feels slow or rushed. */
  --banx-act: clamp(96px, 12vh, 168px);
  --banx-scene-track: 300vh;

  /* -------------------------------------------------------------------- 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);
}