pointbreak 0.6.0

/*
 * Pointbreak Review inspector — design tokens (the single source of truth), now skinned to
 * the unified Pointbreak palette: low-chroma instrument surfaces, a cyan/teal
 * working accent, and the logo's wave ramp. The token names and architecture stay stable so the
 * inspector's component CSS re-skins with a value swap and no rewrite; the
 * values carry the Pointbreak identity.
 *
 * Every design token lives here: the brand ramps, surface/text colors, the
 * semantic status palette, event-type + syntax + diff tokens, the radii scale,
 * and the type registers. app.css and the design-system gallery carry component
 * rules only and reference these via var(--…); this file is the only :root
 * across the served frontend.
 *
 * Dark-first: :root is the dark theme (the product's native register), and the
 * light-theme override is a semantic-alias flip — components never change, only
 * the alias→value mapping. Both themes are WCAG-AA contrast-audited against the
 * surfaces each token actually renders on by the product-local design-system/
 * contrast-check.mjs, which parses this live token source: every text pair
 * clears AA (4.5:1) in both themes, including the composited diff/emphasis rows.
 * Borders sit below
 * the 3:1 non-text bar by design — a perception-grade boundary that surfaces and
 * spacing reinforce, matching the inspector's established values.
 */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Brand — the wave ramp, lifted verbatim from the Pointbreak logo. This is
     the canonical brand scale the identity designs around; the ocean scale
     below it is the marketing site's existing ramp, kept for compatibility
     until the site migrates. Reserved for identity moments (the mark, hero
     gradients, empty states) — not the working accent. */
  --wave-crest: #06b6d4;  /* the logo's bright cyan — outer ring */
  --wave-face: #0891b2;
  --wave-mid: #158dc2;
  --wave-deep: #005a9d;
  --wave-trough: #003359;

  /* Ocean scale (site heritage). */
  --ocean-deep: #0c4a6e;
  --ocean-primary: #0369a1;
  --ocean-light: #0ea5e9;
  --ocean-lighter: #38bdf8;
  --ocean-mist: #e0f2fe;
  --ocean-foam: #f0f9ff;
  --sand: #fef3c7;

  /* Surfaces — a low-chroma instrument register. The lightness ladder carries
     hierarchy while the restrained green cast relates the product to the
     marketing system without importing its editorial composition. */
  --bg: #101817;
  --bg-elev: #151f1e;
  --bg-row: #1b2725;
  --bg-row-sel: #243331;
  --border: #2d3d39;
  --fg: #e5ebe7;
  --fg-dim: #9eaaa5;

  /* Header chrome — a dedicated tone so the topbar can read as a distinct band
     without borrowing the brighter elevated/card surface. Its separation also
     comes from content hierarchy and the bottom rule, not brightness alone. */
  --bg-topbar: #131d1b;

  /* List selection — a light wash paired with an --accent left bar (app.css).
     The bar carries the selected signal, so the wash stays light enough that
     the colored event-type labels on a selected row clear AA (a strong fill
     cannot back dark colored text at AA). Distinct from --bg-row-sel, which
     still fills the fill-based selections (command palette, DAG node). */
  --sel-bg: #243331;

  /* Read-only code/JSON readout surface — a quiet panel, distinct from the
     functional --bg-elev overlays (command palette, diff headers) that should
     stand out. Dark keeps the recessive navy; light is a barely-there near-white
     (ocean-foam --bg-elev read as too strong a blue card on the white page). */
  --bg-code: #121c1a;

  /* Accent — a luminous cyan working signal. --accent is the text/icon/glow
     register; --accent-strong is the fill register;
     --on-accent is the label color on accent fills. */
  --accent: #5ce5f4;
  --accent-strong: #1fc4d6;
  --on-accent: #071012;

  /* Semantic status — the inspector's AA-tuned set, verbatim. One source of truth
     for every state tint; these carry the inspector's meaning and are the
     most-checked values in either system. */
  --success: #6dd28a;        /* head · passed · accepted · added */
  --success-deep: #3a7a52;   /* observation accent */
  --warning: #f0b75a;        /* superseded · open · needs-clarification · errored */
  --warning-soft: #f0c674;   /* diagnostics text */
  --warning-strong: #ffd27a; /* diagnostics code */
  --danger: #f3a0a0;         /* failed · needs-changes · stale · error */
  --assess: #b388ff;         /* assessment */
  --validation: #e88fb0;     /* validation kind */
  --info: #8ab4f8;           /* hunk header */
  --teal: #4fd0c0;           /* response outcome */

  /* Event-type palette — one hue per durable event type, the color-code the
     timeline rails, type-filter toggles, and type labels are scanned by. Single
     source of truth (moved out of app.js); each chromatic type kept perceptually
     distinct so a dense timeline stays readable by color. --evt-capture tracks
     the accent so it inherits the brand. The neutral types alias --fg-dim so
     their labels stay AA on every surface, including a selected row (their own
     lighter grays fell well under AA there). */
  --evt-init: var(--fg-dim);     /* review_initialized (neutral) */
  --evt-capture: var(--accent);      /* work_object_proposed */
  --evt-observation: #6dd28a;/* review_observation_recorded */
  --evt-assessment: #b388ff; /* review_assessment_recorded */
  --evt-request: #f0b75a;    /* input_request_opened */
  --evt-response: #4fd0c0;   /* input_request_responded */
  --evt-note: var(--fg-dim);     /* review_note_imported (neutral) */
  --evt-validation: #e88fb0; /* validation_check_recorded */

  /* Syntax-highlight token palette — one color per token kind for the diff
     viewer. Each aliases an existing semantic hue (already AA-tuned for chip text
     on --bg-row in both themes), so the token colors track the theme through the
     light-mode overrides of those hues without a second value set here. */
  --tok-keyword: var(--assess);
  --tok-string: var(--success);
  --tok-comment: var(--fg-dim);
  --tok-number: var(--teal);
  --tok-type: var(--info);
  --tok-function: var(--accent);
  --tok-constant: var(--warning);
  --tok-operator: var(--fg);
  --tok-punctuation: var(--fg-dim);
  --tok-variable: var(--fg);

  /* Diff surfaces (translucent and theme-neutral — they composite over
     whichever --bg-row the theme sets). */
  --diff-add-bg: rgba(70, 170, 110, 0.14);
  --diff-add-fg: #9ae6b4;
  --diff-del-bg: rgba(200, 90, 90, 0.14);
  --diff-del-fg: #f3b0b0;
  --hunk-bg: #10243a;        /* distinct dark hunk strip */

  /* Intraline emphasis: a stronger add/del tint than the row base so a changed
     sub-span reads as "more changed" than its row. Like --diff-*-bg these are
     translucent and theme-neutral — they composite over whichever --bg-row the
     theme sets, so they keep their :root definitions with no light override. */
  --emph-add-bg: rgba(70, 170, 110, 0.34);
  --emph-del-bg: rgba(200, 90, 90, 0.34);

  /* Error bar surface — themed so the bar inverts with the page (its --danger
     text would otherwise sit on a dark literal and fail AA under the light theme). */
  --error-bg: #3a1416;
  --error-border: #5a2226;

  /* Radii — one px ladder (the inspector's product scale plus the site's softest
     step), with the marketing --radius-* names kept as aliases so the site's
     component CSS keeps resolving during migration. */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 10px;
  --r-2xl: 14px;
  --r-pill: 999px;
  --radius-sm: var(--r-md);
  --radius-md: var(--r-lg);
  --radius-lg: var(--r-xl);
  --radius-xl: var(--r-2xl);
  --radius-pill: var(--r-pill);

  /* Type — two registers in one sheet.
     --fs-*: the product's dense terminal register (four body steps plus one
     heading step; --fs-lg anchors detail-pane/modal titles).
     --text-*: the marketing display ramp, for hero/site surfaces that need
     scale the product never uses. Don't use display sizes in product UI. */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 19px;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;
  --text-7xl: 72px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Vertical rhythm — comfortable defaults; .compact tightens them */
  --row-pad: 8px 14px;
  --line: 1.45; /* @kind other */

  /* Type stacks — merged. The product ships no webfont: --mono keeps
     ui-monospace first so the inspector resolves the OS mono and never depends
     on a font load; "JetBrains Mono" is named for surfaces that self-host it
     (the gallery's published token copy concatenates the @font-face layer).
     The @kind tags classify these for design-system tooling that reads
     tokens.css standalone (unitless line-height and font stacks can't be
     inferred from value alone); inert everywhere else. */
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; /* @kind font */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* @kind font */
  --font-mono: var(--mono); /* @kind font */
  --font-sans: var(--sans); /* @kind font */
}

/*
 * Compact density — a reader-local root class (persisted in localStorage, not URL
 * state) that tightens the rhythm tokens the component rules already consume; no
 * per-component rewrite.
 */
.compact {
  --row-pad: 4px 12px;
  --line: 1.3; /* @kind other */
}

/*
 * Light theme — a semantic-alias override, skinned to
 * warm instrument neutrals and a restrained teal accent. The lighter work
 * surfaces preserve contrast for Review's fixed semantic palette.
 * Components never change; only the alias→value mapping flips. Status hues keep
 * the inspector's light values — darkened so chip text (which sits on --bg-row)
 * clears WCAG AA on the pale row surfaces. The radii, type, and --mono/--sans
 * stacks are theme-agnostic and inherit from :root.
 */
[data-theme="light"] {
  color-scheme: light;

  --bg: #fdfbf5;
  --bg-elev: #fffefa;
  --bg-row: #f7f3e9;
  --bg-row-sel: #e2dbce;
  --bg-topbar: #f4f0e6;
  --sel-bg: #f7f3e9;
  --bg-code: #fffefa;
  --border: #9eaaa4;
  --fg: #1b1d1c;
  --fg-dim: #4e5853;

  --accent: #006875;
  --accent-strong: #007885;
  --on-accent: #ffffff;

  --success: #1a7f37;
  --warning: #8a5d00;
  --danger: #cf222e;
  --assess: #7a44d4;
  --validation: #b32d80;
  --teal: #0f6f66;
  --info: #0969da;

  /* Event-type labels in light theme. The :root --evt-* hues are dark-tuned and
     fall under WCAG AA as label text on these pale surfaces, so each colored
     event type aliases its AA-tuned status twin — keeping one color per concept
     across the timeline and the annotation-kind labels. The neutral init/note
     types keep their :root grays. */
  --evt-capture: var(--accent);
  --evt-observation: var(--success);
  --evt-assessment: var(--assess);
  --evt-request: var(--warning);
  --evt-response: var(--teal);
  --evt-validation: var(--validation);

  /* Diff foregrounds darken to read on pale add/delete rows. Explicit
     high-luminance light surfaces keep every syntax span at AA while preserving
     the same row-tint/intraline-tint grammar as dark. */
  --diff-add-fg: #116226;
  --diff-del-fg: #961b11;
  --diff-add-bg: #f3fbf3;
  --diff-del-bg: #fff8f6;
  --emph-add-bg: #e0ffe0;
  --emph-del-bg: #fff2e6;
  --hunk-bg: #e7f1fa;      /* light hunk strip so the dark-blue --info text reads */

  --error-bg: #ffebe9;
  --error-border: #ffc9c9;
}