/* GENERATED FILE — DO NOT EDIT. Source: packages/design_tokens/src/design_tokens/tokens.json (plan 110). Regenerate: cd packages/design_tokens && uv run python -m design_tokens.generate A parity test (packages/design_tokens/tests) regenerates and diffs this file in CI, so a hand-edit here cannot land. The ACCENT is the project's identity color, not a fixed brand hue: theme.ts (browser) and stamp_identity_color.py (boot) set --accent + --accent-ink at runtime from the project color. Clay below is only the default until that resolves. */ :root { /* ── canvas ── */ /* Warm-paper canvas — the claude.ai reading-room palette (plan 89). */ --bg: #fdfdfc; /* claude.ai canvas — measured 253,253,252 (clean near-white) */ --panel: #ffffff; /* crisp white cards, raised above the near-white canvas */ --border: #e8e6df; --text: #23221c; --muted: #57544b; --faint: #8b8579; /* ── accent (appearance-tuned — runtime-owned) ── */ /* The ACCENT slot belongs to the per-project identity color, not to this */ /* file — and the stored color is a SEED, not a paint value: one hex */ /* cannot be legible on both warm paper and warm charcoal. theme.ts / */ /* stamp_identity_color.py set --accent-light/--accent-dark from the seed */ /* (inline , so first paint already wins): same hue, deep on */ /* paper / bright on charcoal, floored at 4.5:1 against the appearance's */ /* least-contrasting plane (accent_variants). --accent only maps to the */ /* pair per color scheme; the var() fallbacks are accent_variants of the */ /* clay default. --accent-ink is STATIC per appearance because the floor */ /* makes the winning ink constant: paper ink on the deep light accent, */ /* charcoal on the bright dark one (a test proves this law). The literal */ /* seed survives as --project-color for identity swatches (favicon). */ /* Never emitted to Swift — IdentityAccent owns the slot natively. */ --accent: var(--accent-light, #ad4c27); /* appearance-tuned identity accent — runtime-derived from the seed */ --accent-ink: #fbf7f1; /* ink ON the accent — constant per appearance by construction */ --accent-wash: color-mix(in srgb, var(--accent) 11%, var(--bg)); --accent-line: color-mix(in srgb, var(--accent) 30%, transparent); --accent-text: color-mix(in srgb, var(--accent) 82%, var(--text)); --active: var(--accent-wash); --link: var(--accent-text); --send-bg: var(--accent); --send-ink: var(--accent-ink); /* ── surface mechanics ── */ /* Web surface plumbing carried over verbatim from index.css (plan 89). */ --hover: rgba(0, 0, 0, 0.04); /* Piece 2 (#1131) repoints this to the #1129 gutter plane (#dcd8d0 light) when the planes are actually applied; until then it keeps the shipped value so this change stays visually inert. */ --gutter: #f2f1ec; /* bg BEHIND floating islands (grayer than the white islands) */ --isle-shadow: 0 1px 2px rgba(40, 30, 20, 0.05), 0 4px 14px rgba(40, 30, 20, 0.05); --hairline: var(--border); /* alias so var(--hairline, #slate) fallbacks resolve warm */ --danger: var(--red); /* semantic delete/error tone (warm); alias of --red */ --red: #d23b3b; --user-bubble: #efefee; /* claude.ai user bubble — measured 239,239,238 (near-neutral) */ --code-bg: #f5f4f0; --composer-bg: #ffffff; --composer-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 8px 30px rgba(60, 40, 25, 0.10); /* ── tonal planes (#1129) ── */ /* Four tonal steps so columns separate without relying on hairlines: */ /* gutter (outside the window frame) > ground (window chrome: the */ /* sidebar / counterparty rail) > rail (the secondary list column) > */ /* canvas (the conversation, the document). --gutter itself still carries */ /* its legacy floating-island value above until piece 2 applies the */ /* planes; the artboard gutter is #dcd8d0. NOT consumed by any surface */ /* yet — pieces 2-4 apply them. Dark values are initial picks (see */ /* `about`), stepped on the shipped warm charcoal so the elevated canvas */ /* stays the lightest plane. */ --ground: #efeee9; /* window chrome: the sidebar / counterparty rail */ --rail: #fbfaf7; /* the secondary list column (threads) */ --canvas: #ffffff; /* the conversation, the document — plan 89's white stays */ --border-soft: #f0eee8; /* hairline on the canvas plane (--border is the ground hairline) */ /* ── ink ramp additions (#1129) ── */ /* Five-step ink ramp: ink-strong (names, row primaries) > text (body) > */ /* ink-soft (secondary) > muted > faint. The middle three already exist */ /* in the canvas group; these add the outer steps. */ --ink-strong: #1d1c19; --ink-soft: #3a382f; /* ── type ramp (#1129) ── */ /* Six steps, one law: THE TRANSCRIPT IS THE BIGGEST TEXT IN THE WINDOW — */ /* every piece of chrome is smaller than the message it frames (a parity */ /* test enforces body = max of the ramp). px on the web, pt on native. */ --t-section: 11px; /* section headers (Bots, Rooms) */ --t-section-weight: 600; --t-section-tracking: 0.06em; /* letterspacing for the uppercase section header */ --t-meta: 11.5px; /* second line of a row, chips */ --t-row: 13px; /* list rows (weight 400-600 by state) */ --t-title: 13.5px; /* sidebar project name, headers (up to 15px in page headers) */ --t-title-weight: 650; --t-body: 14.5px; /* the conversation */ --t-body-leading: 1.6; /* 1.55-1.65 latitude; token carries the middle */ --t-display-family: var(--serif); /* document and display headings; native uses the system serif design */ /* ── radii (#1129) ── */ /* Four steps (plus 50% for agent marks, which is a shape, not a scale */ /* step). Native mirrors these with .continuous corner style. */ --r-row: 6px; --r-card: 10px; --r-bubble: 18px; --r-pill: 999px; /* ── rows (#1141) ── */ /* The most repeated object in the product. One-line with a mark is */ /* 30 tall, two-line is 46; rest is transparent, hover is the solid */ /* below, selected is --accent-wash plus the one float shadow. The */ /* dark hover is an initial pick (see `about`). */ --row-hover: #f6f4f0; /* solid hover fill for list rows (artboard-measured) */ --row-one-line: 30px; --row-two-line: 46px; /* ── elevation (#1129) ── */ /* Exactly two elevations besides hairline-separated planes: what floats */ /* above the canvas (composer, selected row) and the window itself. */ /* No glass, no gradients. Dark values are initial picks (see `about`). */ --shadow-float: 0 1px 2px rgba(40, 30, 20, 0.07); --shadow-window: 0 20px 54px rgba(40, 30, 20, 0.26); /* ── motion (#1129) ── */ /* Motion is nearly absent: one hover/selection duration; the transcript never animates in. */ --motion-fast: 120ms; --motion-ease: ease; /* ── typefaces ── */ /* Faces are web-declared (@font-face in index.css); the stack token lives here. */ --serif: "Source Serif 4", Charter, "Iowan Old Style", Georgia, "Times New Roman", serif; } @media (prefers-color-scheme: dark) { :root { /* ── canvas ── */ --bg: #201f1c; /* warm charcoal ground */ --panel: #292824; /* raised warm surface */ --border: #38352f; --text: #ece7da; --muted: #ada795; --faint: #7e7768; /* ── accent (appearance-tuned — runtime-owned) ── */ --accent: var(--accent-dark, #db7551); --accent-ink: #1c1712; --accent-wash: color-mix(in srgb, var(--accent) 20%, var(--bg)); --accent-line: color-mix(in srgb, var(--accent) 34%, transparent); --accent-text: color-mix(in srgb, var(--accent) 86%, var(--text)); /* ── surface mechanics ── */ --hover: rgba(255, 255, 255, 0.05); --gutter: #1a1917; /* bg BEHIND floating islands (darker than --panel) */ --isle-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 20px rgba(0, 0, 0, 0.30); --red: #f87171; --user-bubble: #333029; /* warm raised bubble */ --code-bg: #1a1916; /* recessed warm well */ --composer-bg: #292824; --composer-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 8px 30px rgba(0, 0, 0, 0.5); /* ── tonal planes (#1129) ── */ --ground: #1d1c19; --rail: #232220; --canvas: #292824; --border-soft: #33312b; /* ── ink ramp additions (#1129) ── */ --ink-strong: #f5f1e6; --ink-soft: #cfc9ba; /* ── rows (#1141) ── */ --row-hover: #2e2d28; /* ── elevation (#1129) ── */ --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-window: 0 20px 54px rgba(0, 0, 0, 0.5); } }