pointbreak 0.5.0

/*
 * shore inspector — design tokens (the single source of truth), now skinned to
 * the unified Pointbreak palette: "harbor" ocean-navy surfaces, the sky accent,
 * and the logo's wave ramp. The token NAMES and architecture are Shoreline's,
 * kept verbatim so the inspector's component CSS re-skins with a value swap and
 * no rewrite; only 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 (the merged design-system's
 * contrast-check.mjs is the audit of record): 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 Shoreline's own 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 — "harbor": Shoreline's lightness ladder re-hued to the ocean
     navy (hue ~207°). --bg is the marketing chrome canvas exactly, so the
     product and the site's terminal/debugger mockups share a floor. --border
     keeps Shoreline's perception-grade-boundary lesson: clearly visible
     against every surface it separates. */
  --bg: #0a1929;
  --bg-elev: #0e2233;
  --bg-row: #132a3f;
  --bg-row-sel: #1c3b5a;
  --border: #33506c;
  --fg: #d9e8f5;
  --fg-dim: #9db1c4;   /* 5.22:1 on --bg-row-sel — raised from #96aabc (4.81) for the margin Shoreline keeps (5.32) */

  /* Header chrome — a dedicated deeper tone so the topbar reads as a distinct
     band over the page (page/topbar/field sat within ~1.06 when the topbar
     borrowed --bg-elev). Its own token so --bg-elev keeps serving cards/code
     blocks unchanged. */
  --bg-topbar: #143252;

  /* 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: #122c46;

  /* 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: #0e2233;

  /* Accent — the signature sky-blue. --accent is the text/icon/glow register
     (site's sky-400 CTA hue); --accent-strong is the fill register;
     --on-accent is the label color on accent fills. */
  --accent: #38bdf8;
  --accent-strong: #0ea5e9;
  --on-accent: #0a1929;

  /* Semantic status — Shoreline'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;        /* harbor-tinted hunk strip (was #141b27) */

  /* 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 (Shoreline'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 (Shoreline's mechanism), skinned to
 * the ocean brand: the elevated surface is ocean-foam, the selection is a
 * mist-family blue, and the accent re-points to ocean-primary (the site's
 * light-theme primary), which clears AA on white where the cyan accents cannot.
 * Components never change; only the alias→value mapping flips. Status hues keep
 * Shoreline'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: #ffffff;
  --bg-elev: #f0f9ff;      /* ocean-foam */
  --bg-row: #e9f3fb;
  --bg-row-sel: #d3e9fa;
  --bg-topbar: #dfeaf6;    /* deeper header band — 1.22 step from the white page */
  --sel-bg: #edf4fe;       /* light selection wash; the --accent bar signals selection */
  --bg-code: #f6f9fd;      /* quiet near-white code panel; softer than the ocean-foam --bg-elev */
  --border: #bcd3e5;
  --fg: #142433;
  --fg-dim: #4c6173;       /* 5.15:1 on --bg-row-sel — darkened from #52687b (4.51, razor-thin) */

  --accent: #0369a1;       /* ocean-primary */
  --accent-strong: #0369a1;
  --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 the pale add/del rows; the translucent
     --diff-*-bg values are theme-neutral and keep their :root definitions.
     Darkened past #147029/#b42318 so the intraline-EMPHASIS pairs clear AA too
     (4.87/4.85 vs 4.03/3.74 — an inherited light-theme gap this sheet closes).
     These clear both surfaces — 6.56/7.18 on the base rows, 4.87/4.85 on the
     emphasized sub-spans. */
  --diff-add-fg: #116226;
  --diff-del-fg: #961b11;
  --hunk-bg: #e7f1fa;      /* light hunk strip so the dark-blue --info text reads */

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