fix: restore --sf-shadow-color and --sf-prose-paragraph to tokens.css

[jackgranatowski]

Token names in tokens.css are part of the public API — they must not be
removed regardless of current usage. Restores both variables erroneously
dropped in the CSS audit commit (5ad6670).

https://claude.ai/code/session_01UykVy4gmFJEFgFfTGqDjYr

Summary by CodeRabbit

• New Features

  • Browser light/dark form styling is now configurable via a theme variable.
  • Added tokens for shadow coloring and prose paragraph spacing.

• Documentation

  • Added a comprehensive demo page showcasing tokens, layouts, and accessibility/interaction examples.

• Chores

  • Spacing alias variables reformatted for consistency.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: b56feb9c-3e94-4a02-8809-39e5cf79378e

📥 Commits

Reviewing files that changed from the base of the PR and between 540890c and 8d9da1e.

📒 Files selected for processing (1)

• docs/demo.html

🚧 Files skipped from review as they are similar to previous changes (1)

• docs/demo.html

---

📝 Walkthrough

Walkthrough

This PR makes the root color-scheme configurable via a new --sf-color-scheme token, adds --sf-shadow-color and --sf-prose-paragraph tokens, and adds docs/demo.html, a static demo page that showcases tokens, layouts, accessibility patterns, and a working light/dark theme toggle.

Changes

Design System Demo and Theme Configuration

Layer / File(s)	Summary
Theme configuration CSS variables core/base.css, core/tokens.css	The color-scheme in base.css now reads from the --sf-color-scheme CSS variable. New tokens --sf-shadow-color (shadow palette reference) and --sf-prose-paragraph (spacing alias) are added to the token layer.
Demo page structure, styles, and navigation docs/demo.html (lines 1–361)	Static HTML document with demo-only CSS overrides for swatches, spacing rulers, shadow cards, and motion samples. Sticky header with theme toggle and sidebar navigation.
Token showcase sections docs/demo.html (lines 362–663)	Visual swatches and grids for colors, typography scale, spacing value bars and aliases, shadow levels, and border-radius sizes.
Motion, states, and accessibility demos docs/demo.html (lines 665–804)	Demonstrates transitions, easing curves, durations, state styles (loading, skeleton, hidden, truncated), skip link, focus ring verification, screen-reader-only text, disabled controls, and contrast/transparency notes.
Layout system demonstrations docs/demo.html (lines 805–1087)	Showcases layout utilities: Stack, Cluster, Sidebar, Switcher, Grid, Cover, Frame, Reel, Prose, Container/Section, Bento, Content Grid, and Pancake with examples and responsive notes.
Reset and base styles with theme toggle docs/demo.html (lines 1088–1194)	Demonstrates form elements, table styling, selection color, list reset behavior, HR separators, and global box-model resets. Inline JS toggles the root data-theme between light and dark and updates the toggle button label.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• codeslash-dev/SLASHED#2: Overlaps on --sf-prose-paragraph spacing token usage and related layout token edits.
• codeslash-dev/SLASHED#65: Related changes to color-scheme handling in core CSS and token defaults.
• codeslash-dev/SLASHED#10: Prior token edits touching shadow-color and spacing aliases in core/tokens.css.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: restoring two CSS custom properties (--sf-shadow-color and --sf-prose-paragraph) to tokens.css, which aligns with the PR objectives.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/investigate-tokens-css-changes-HIXlM

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@docs/demo.html`:
- Around line 1078-1080: The inner landmark uses a <main> element (<main
class="demo-box">) nested inside the page's primary <main id="main"> which is
invalid; replace the inner <main> with a non-landmark container such as a <div>
or <section> (e.g., <div class="demo-box"> or <section class="demo-box"
role="region" aria-label="Demo">) so it preserves styling/semantics without
creating a nested main; update any references to the inner element if they rely
on it being a <main>.
- Line 465: The demo heading uses the wrong CSS token name: replace the
incorrect token reference --sf-h2-font-size in the h2 element's inline style
with the correct token --sf-h2-size so the heading follows the defined scale;
locate the h2 element in docs/demo.html (the element showing "h2 — The quick
brown fox") and update its style attribute to use --sf-h2-size.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: ce12abfb-eec3-42ec-9dae-1bfb8c851698

📥 Commits

Reviewing files that changed from the base of the PR and between cc7fb52 and 540890c.

⛔ Files ignored due to path filters (1)

• dist/slashed.essential.css is excluded by !**/dist/**

📒 Files selected for processing (3)

• core/base.css
• core/tokens.css
• docs/demo.html