diff --git a/.agents/skills/repo-taste/SKILL.md b/.agents/skills/repo-taste/SKILL.md new file mode 100644 index 00000000..47576ba9 --- /dev/null +++ b/.agents/skills/repo-taste/SKILL.md @@ -0,0 +1,30 @@ +--- +name: repo-taste +description: Apply repo.ing's deliberate dark, tactile, lightly retro design language to frontend work without breaking financial truth, identity, accessibility, or live functionality. Use for UI design, review, restyle, UX polish, component creation, dashboards, launch screens, and trading screens. +--- + +# Repo Taste — frontend design skill + +This is a product-specific art director and quality gate, NOT a permission to redesign the product or change financial behavior. + +## Read first +1. design/repo-taste/CORE.md — portable taste principles and decision order. +2. design/repo-taste/profiles/repoing.md — actual brand, existing code, assets, and design exceptions. +3. design/repo-taste/REVIEW.md — before/after visual and functional acceptance. + +For a different product, replace the repo.ing profile with that product's own approved profile. Never carry over Repo Cat or repo.ing's colours automatically. + +## Workflow +1. Inventory the route, the user's primary task, real data, existing components, theme tokens, imagery, and responsive behavior. Preserve the current screen in screenshots before editing. +2. State one screen question and one product-specific visual device. Produce a compact change plan naming files and protected flows. +3. Work in the existing Next.js/React/CSS stack. Keep all routes, wallet state machines, onchain read semantics, formatting, API contracts, and claims/trading safeguards intact. +4. Prefer the existing CSS variables and brand assets. Make a screen legible and trustworthy first; retro texture and motion are second-layer accents. +5. Test visible empty, loading, delayed, error, disconnected, and confirmed states without inventing market activity or balances. +6. Inspect actual browser output at 1440, 768, and 390 px, dark and light if supported. Review the screenshots, fix the three largest issues, and repeat up to three rounds. +7. Report what changed, proof collected, remaining defects, and any tests/checks not run. + +## Optional upstream skill +If Leonxlnx/taste-skill is installed, use design-taste-frontend as a SECONDARY tool. For real app screens choose its --app workflow and --keep palette,type. Use its browser inspector when possible, and document narrow, intentional exceptions for repo.ing's monospace, grid, borders, soft radii, and existing brand motion. Do not let its generic house rules overwrite this project's identity. + +## Stop conditions +Do not claim visual verification without seeing the rendered screenshots. Do not fabricate market numbers, simulate a successful signing flow, alter buy/sell or settlement code as a visual cleanup, or deploy/merge without an explicit task. \ No newline at end of file diff --git a/.claude/skills/repo-taste/SKILL.md b/.claude/skills/repo-taste/SKILL.md new file mode 100644 index 00000000..47576ba9 --- /dev/null +++ b/.claude/skills/repo-taste/SKILL.md @@ -0,0 +1,30 @@ +--- +name: repo-taste +description: Apply repo.ing's deliberate dark, tactile, lightly retro design language to frontend work without breaking financial truth, identity, accessibility, or live functionality. Use for UI design, review, restyle, UX polish, component creation, dashboards, launch screens, and trading screens. +--- + +# Repo Taste — frontend design skill + +This is a product-specific art director and quality gate, NOT a permission to redesign the product or change financial behavior. + +## Read first +1. design/repo-taste/CORE.md — portable taste principles and decision order. +2. design/repo-taste/profiles/repoing.md — actual brand, existing code, assets, and design exceptions. +3. design/repo-taste/REVIEW.md — before/after visual and functional acceptance. + +For a different product, replace the repo.ing profile with that product's own approved profile. Never carry over Repo Cat or repo.ing's colours automatically. + +## Workflow +1. Inventory the route, the user's primary task, real data, existing components, theme tokens, imagery, and responsive behavior. Preserve the current screen in screenshots before editing. +2. State one screen question and one product-specific visual device. Produce a compact change plan naming files and protected flows. +3. Work in the existing Next.js/React/CSS stack. Keep all routes, wallet state machines, onchain read semantics, formatting, API contracts, and claims/trading safeguards intact. +4. Prefer the existing CSS variables and brand assets. Make a screen legible and trustworthy first; retro texture and motion are second-layer accents. +5. Test visible empty, loading, delayed, error, disconnected, and confirmed states without inventing market activity or balances. +6. Inspect actual browser output at 1440, 768, and 390 px, dark and light if supported. Review the screenshots, fix the three largest issues, and repeat up to three rounds. +7. Report what changed, proof collected, remaining defects, and any tests/checks not run. + +## Optional upstream skill +If Leonxlnx/taste-skill is installed, use design-taste-frontend as a SECONDARY tool. For real app screens choose its --app workflow and --keep palette,type. Use its browser inspector when possible, and document narrow, intentional exceptions for repo.ing's monospace, grid, borders, soft radii, and existing brand motion. Do not let its generic house rules overwrite this project's identity. + +## Stop conditions +Do not claim visual verification without seeing the rendered screenshots. Do not fabricate market numbers, simulate a successful signing flow, alter buy/sell or settlement code as a visual cleanup, or deploy/merge without an explicit task. \ No newline at end of file diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 00000000..ecdc38e8 --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,9 @@ +# Agent guidance for repo.ing + +For frontend design, UI review, visual polish, copy/layout work, or component restyling, use the repo-taste skill in .agents/skills/repo-taste/SKILL.md. Its portable principles, repo.ing profile and visual verification are under design/repo-taste/. + +The project is a real financial application. Design work must preserve canonical repository identity, real chain-derived figures, fee/reward accounting, wallet prompts, slippage, signing, and trade/claim/launch safety checks. Do not modify transaction, settlement, custody, authorization, API, or production controls as part of a cosmetic task. + +Use the existing stack, theme tokens, typography, and official brand assets. Keep working light/dark themes. Do not invent Repo Cat variants, claims of verified data, user balances, trading history, or proof. + +For other engineering work, follow the relevant existing documentation and tests. This guidance does not authorize production deployment, main-branch merges, or onchain actions. \ No newline at end of file diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 00000000..48386e30 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,7 @@ +# Claude Code guidance for repo.ing + +When the task concerns visual design, frontend UI, page review, interaction polish, layouts, or design-system work, invoke /repo-taste or read .claude/skills/repo-taste/SKILL.md, then design/repo-taste/CORE.md, design/repo-taste/profiles/repoing.md and design/repo-taste/REVIEW.md. + +Keep the existing Next.js stack and the repo.ing product identity. Visual tasks are not authorization to edit financial logic, wallet signing, token launches, fees, claims, custody, risk checks, or deployment. Never replace real market data with invented numbers. + +Use browser screenshots for before/after claims and be explicit when browser inspection is unavailable. This file only adds design-task guidance; the existing engineering and security documents still govern all other work. \ No newline at end of file diff --git a/design/repo-taste/BRIEF.md b/design/repo-taste/BRIEF.md new file mode 100644 index 00000000..ad5b2471 --- /dev/null +++ b/design/repo-taste/BRIEF.md @@ -0,0 +1,32 @@ +# Reusable agent brief + +Use this inside Codex or Claude Code when requesting UI changes. Complete only the fields that matter; the agent should derive known values from the repository. + +~~~text +Use the repo-taste skill. + +Project/profile: repo.ing (design/repo-taste/profiles/repoing.md) +Route or component: +Primary user: +One job to complete: +Current problem: +Must preserve: +Relevant approved reference artwork/screenshots: +Success condition: + +First inventory the real page, source tokens, data and states. Capture a before image where possible. Propose a concise direction; then implement the smallest cohesive improvement while leaving trading, auth, fees, launch and claim behavior untouched. Visually review at 1440, 768 and 390, dark/light, critique the top three problems and fix them. Show real screenshots, tests run and limitations. No production deploy or merge. +~~~ + +## Blank profile for another product + +A new project's profile should identify: +- Product purpose, user and dominant action. +- Current code/framework, fonts and token source files. +- Actual colour roles in both themes; asset filenames and licence/reference provenance. +- Signature object, visual texture, character and motion limits. +- Routes and page-vs-app classification. +- Product data, source-of-truth and restricted operations. +- Known good reference screenshots; explicit anti-examples. +- Three initial routes to improve and objective release checks. + +The PORTABLE CORE is shared. Each product has a separate PROFILE. Do not homogenise Colony.fun, FYNCH and repo.ing by inheriting the same visual skin. \ No newline at end of file diff --git a/design/repo-taste/CORE.md b/design/repo-taste/CORE.md new file mode 100644 index 00000000..00ef6669 --- /dev/null +++ b/design/repo-taste/CORE.md @@ -0,0 +1,49 @@ +# Portable taste principles + +## Working definition + +An excellent interface feels specific to the thing it serves. Avoid the generic recipe of centered hero + pills + icon cards + lavender glow, but also avoid replacing it with empty minimalism. Each screen must contain the product's actual subject, task, and evidence. + +## The six laws + +### 1. One job is dominant +Write one sentence before building: **The visitor came here to [job] and needs to know [fact] before taking [action].** The largest visual element answers that sentence. Secondary blocks answer distinct follow-up questions. No repeated dashboard KPI cards merely to occupy space. + +### 2. Authenticity beats decoration +Inventory 8–12 objects, constraints, people, numbers, product rituals, and image assets unique to the project. Use these to design a visual device that a competitor could not simply rebrand. Render real product data where available; clearly label fixtures in local-only mockups. Never invent customers, onchain numbers, returns, volume, badges, quotes, or signing success. + +### 3. Three visual brightness tiers +Keep a ground, raised/active surfaces, and primary ink hierarchy. A single action colour should indicate the next move. Status colours must express actual meaning (success, warning, danger), not decorate unrelated cards. Secondary copy stays readable. Support a project's existing light theme when it has one. + +### 4. Tactile, not noisy +Offer small satisfying press/hover/focus feedback, rounded hit targets where brand-approved, and a cohesive easing curve. Pixel/CRT/dither treatment is permitted on a mascot, illustration, poster, easter egg, or restrained background. Never put scanlines or texture over figures, charts, labels, input fields, warnings, or wallet consent. No infinite bounce on a primary decision control. + +### 5. Characters have identity +Use approved source artwork, with fixed anatomy, face, silhouette, proportions, crop and colours. Do not generate a new mascot because a placeholder is missing. Do not add fingers or humanlike hands to a brand character whose approved references lack them. Prioritise supplied images over SVG caricatures or generic emoji. Respect asset/licence provenance. + +### 6. Inspect the thing people use +At desktop and phone widths, verify real content, overflow, contrast, focus, states and primary action reachability. Beautiful code with a broken render fails. Three screenshot-led improvement rounds maximum, largest defects first. + +## Design primitives + +- **Typography:** One strong headline voice plus one readable utility/data voice. Monospace is encouraged for actual identifiers, code, tabular numbers, and brands that deliberately use it; don't let decorative tracking shrink essential figures. Aim for visibly different primary/secondary levels, not six near-identical sizes. +- **Spacing:** Consistent outer edges. Dense screens stay dense when the task needs scanning. Avoid accidental gaps, orphan cards and giant blank areas. Compact tables need aligned figures, adequate row targets, headers and a mobile alternative. +- **Forms and actions:** One clear primary action. Keep labels near their controls, real errors near their fields, confirmation states distinct, and dangerous decisions reversible or clearly gated when the product supports it. +- **Charts:** No ornamental invented lines. Preserve units, time ranges, source freshness, empty history, uncertainty and accessible tabular or textual alternatives. Data takes priority over colour effects. +- **Motion:** Transform/opacity first; provide prefers-reduced-motion behavior and static fallbacks. No motion that hides content if JavaScript fails or changes transaction meaning. +- **Responsive:** Compose for 1440, 768 and 390 px; no sideways document scroll, tiny chart labels, cut-off balances or inaccessible wallet actions. +- **Copy:** Plain, specific, short and evidence-led. Do not imply endorsement of community-launched markets, guaranteed fees, or that a user has signed before a confirmed result. + +## Decision sequence for agents + +1. Inventory the route, source code, task, actual available assets, and states. +2. State one screen question and one uniquely owned art-direction idea. +3. Identify existing patterns and choose what to keep. +4. Draft a restrained change plan showing exact affected files and protected flows. +5. Implement the smallest cohesive set of changes within the existing stack. +6. Run relevant tests and inspect real screenshots. +7. Fix the three largest user-visible issues; report evidence, not confidence adjectives. + +## Never as a side effect of visual work + +No migrations, key/credential changes, wallet provider rewrites, balance aggregation changes, price calculation changes, quote/fee/slippage changes, fee withdrawal or buyback automation, transaction submission, custody, live deploy, or main-branch merge. Those require a separately scoped engineering task and its own proof. \ No newline at end of file diff --git a/design/repo-taste/README.md b/design/repo-taste/README.md new file mode 100644 index 00000000..2308519c --- /dev/null +++ b/design/repo-taste/README.md @@ -0,0 +1,35 @@ +# Repo Taste + +A reusable art-direction and UI-verification system, starting with repo.ing. It encodes the difference between **our intended aesthetic** and any coding model's default UI preferences. This is documentation and agent guidance; it does not modify the running site. + +## The idea + +**Soft controls. Sharp information. A little old-internet magic.** + +Build interfaces that feel authored and alive without making financial facts hard to read. The mascot, type, rhythm, and tiny tactile interactions make the product recognisable; users still get a clear answer, clear status, and a safe next action. + +## Contents + +- CORE.md — portable decisions, brand inheritance, interaction and content rules. +- profiles/repoing.md — repo.ing's current design assets, colours, type, route-specific direction, and non-negotiables. +- tokens/repoing.css — opt-in reference aliases for existing token names; NOT imported into the site. +- REVIEW.md — browser, accessibility, data-truth and interaction quality gates. +- BRIEF.md — reusable prompt for a design task and a blank project-profile starter. +- .agents/skills/repo-taste/SKILL.md — Codex/agent entry point. +- .claude/skills/repo-taste/SKILL.md — Claude Code entry point. + +## Use + +In the repo root, ask Codex to **use repo-taste to audit and polish /explore**, or ask Claude Code **/repo-taste audit and polish /explore**. Scope one route or component at a time. The skill first records the original, inventories the real data and assets, edits minimally, then verifies the rendered result at three widths. + +If the upstream Taste Skill is also installed, its --app draw and inspector can supply composition options and automated browser checks. Its general anti-slop bans are NOT higher priority than the repo.ing profile. Preserve sanctioned monospace, borders, soft interactions and existing brand textures; justify exceptions individually. + +This first version intentionally ships **design instructions only**, not a site redesign. There are no claims of completed browser screenshots or changed production UI. + +## Port to another project + +Copy CORE.md and REVIEW.md, then create a project-specific profile documenting the real UI, current files, palette, fonts, art assets, permitted style and forbidden changes. Copy one or both skill entry points and update the profile path. Do not copy Repo Cat, colours or token values into FYNCH/Colony/Burrow unless they belong to that brand. + +## Precedence + +Financial and security correctness > real data and accessibility > established brand identity > the task brief > optional taste-skill defaults. An attractive screenshot never justifies changing account state, prices, fees, trade preflight, signatures, or consent. \ No newline at end of file diff --git a/design/repo-taste/REVIEW.md b/design/repo-taste/REVIEW.md new file mode 100644 index 00000000..9376797e --- /dev/null +++ b/design/repo-taste/REVIEW.md @@ -0,0 +1,40 @@ +# Repo Taste — review and release gate + +Treat screenshots and real user flows as evidence, not embellishment. This check is for UI changes; engineering changes still require the project's domain-specific tests. + +## Before writing code + +- Record the baseline route and files, screenshot it at 1440, 768 and 390 px where a browser is available. +- Verify desktop and mobile in the project's supported dark and light themes. +- State the screen's single main question, the one user action, and the one product-specific visual device. +- Identify every data source, special status, identity asset and protected flow touched. + +## After the change + +1. **Visual:** balanced outside margins, legible contrast, single visual focal point, aligned table numbers, consistent radii, no accidental whitespace bands, no clipped titles, no document-level sideways scrolling at 390. +2. **Product identity:** exact approved Repo Cat asset and image proportions, brand typography and colour roles, unique repo/market context, deliberate subtle motion/retro detail rather than generic dashboard slop. +3. **Data truth:** real vs estimated, zero vs missing, confirmed vs finalized vs pending, SOL vs USD units, token supply and prices, earned vs claimed vs available, repo owner verification, actual time period and freshness. A UI adjustment must not alter these. +4. **Interaction:** primary action reachable by keyboard and thumb, input labels and focus, active/disabled/hover/press states, responsive menus, back/forward navigation. Do not trigger live trades or signing while testing cosmetics. +5. **Adverse states:** empty search, no trades, loading and delayed data, quote retry, disconnected wallet, invalid amount, expired estimate, a failed request, and a previously submitted transaction awaiting status. +6. **Accessibility:** semantic headers, labels, keyboard focus, reduced motion, alternative text where needed and screen-reader descriptions for nontextual charts/progress. +7. **Preservation:** original navigation, working controls, API output semantics, chart evidence and transaction safeguards remain unchanged. Run existing relevant tests and a production build when the environment permits. + +## Taste Skill integration + +When installed, choose the --app mode for the screens people work in. Run its static lint and browser inspector with --app, using --keep palette,type when choosing a style. Exceptions to upstream generic bans (monospace, hairlines, subtle glow, grid, existing gradient, approved rounded buttons) must be identified narrowly. Never turn off all checks or change project identity just to make a validator pass. + +If browser access, the server or dependencies are unavailable, run the tests you can and explicitly report missing screenshots; do not invent a score or call the review complete. + +## Outcome format + +- **Route / objective:** what screen and job were improved. +- **Before:** baseline screenshot paths or a clear "not captured" note. +- **Changed files:** exact paths, and scope of the changes. +- **After:** screenshot paths at 1440/768/390, both themes where relevant. +- **Findings:** biggest three issues fixed and remaining limitations. +- **Verified:** real commands and test outcomes only; separate unrun steps. +- **Protected flows:** confirmation that quotes, financial semantics, signing, claims, routes and permission boundaries were not modified. + +## Release standard + +No broken mobile navigation, truncated critical value, misleading balance/fee state, unresponsive primary action, unintended transaction change, or unreviewed brand replacement. Obtain explicit approval before deploying or merging a visual change into live production. \ No newline at end of file diff --git a/design/repo-taste/profiles/repoing.md b/design/repo-taste/profiles/repoing.md new file mode 100644 index 00000000..4dcb151c --- /dev/null +++ b/design/repo-taste/profiles/repoing.md @@ -0,0 +1,64 @@ +# Product profile: repo.ing + +Status: v1 profile, grounded in the public repository's existing code and assets as inspected on 2026-10-28. This is an art-direction specification, not proof of a production screenshot inspection. + +## Identity + +**repo.ing — the market layer for open source.** A canonical market for each eligible public GitHub repository; trading supports builders. Product feeling: a developer's trading terminal that grew a friendly cat. It should be credible for prices and signing, but lightly odd, tactile, and unmistakably a piece of the old internet. + +Brand motto for design: **Soft controls. Sharp information.** Roughness lives around the product, never between the user and money. + +## Existing source of truth (do not fork unnecessarily) + +- app/globals.css defines the dark CSS tokens: --bg #101213, --surface #17191b, --surface2 #1c1f21, --border #32373a, --border-strong #464d52, --text #f4f6fa, --muted #aeb6c1, --dim #7f8892, --green #81e6ad, --green-dark #63d997 and --red #f28485. +- app/theme.css defines the existing light palette under :root[data-theme=light], including --bg #f7f9f7, --surface #fff, --green #2ec47c, --text #19221c. Light mode is an existing feature; preserve it and the theme toggle. +- app/home-fonts.js loads Archivo Black for display and JetBrains Mono for labels/numbers on the home page via next/font; app/home.css consumes --font-display and --font-mono. The base app body otherwise uses the existing system sans stack. Do not force a global font migration. +- app/home.css defines the hero, live $REPOING card, grid, proof strip, ticker and motion. It already uses gradients, subtle glow, hairlines and monospace deliberately. These are APPROVED brand exceptions to upstream Taste Skill's generic page bans. +- app/trade-panel.css defines actual trade field styles, buy/sell states, quote details and 52px trade submit. Preserve their semantics. +- app/components/ui.jsx owns shared nav, market rows, financial labels, official-market link and wallet header. app/components/brand-mark.jsx renders the pre-cropped cat from /brand-cat.webp. +- app/components/root-document.jsx imports the existing style layers and wallet providers. Avoid introducing a parallel global styling system. +- docs/CHARTS_AND_RESPONSIVENESS.md describes chart evidence/freshness, absent candles, accessibility, transaction states and explicit mobile checks. Treat it as an essential visual acceptance document. + +## Approved identity assets already present + +- /public/brand-cat.webp — current header mark and official token navigation icon. Preserve source, placement and aspect ratio. +- /public/gitcat.png — existing large-format brand art. +- /public/credits/repocat-512.png — existing Repo Cat image; check the intended variant against latest art references before changing or repurposing it. +- /public/art/*.webp and /public/launch-icons/*.webp — existing narrative illustrations; use sparingly where they explain an action. +- /public/badges/new.webp — current bespoke new badge. + +The source images are identifiers, NOT permission to stylize them. If a newer approved turn-around/tail Repo Cat reference exists, request or locate the exact asset before replacing existing artwork. Do not substitute a round ball-shaped cat or synthetic hand illustration. + +## Route-specific direction + +### Home (public-facing explanation) +Archivo Black and mono accents are appropriate. Keep the functional repo lookup and live $REPOING fragment as the true hero; the central promise must read in five seconds. Art or texture is atmospheric and outside data/CTA hit targets. Use the page workflow of upstream Taste Skill only for marketing sections; live market fragments are app UI. + +### Explore (/explore and discovery lists) +This is a working application, not a marketing page. Make search, filtering, repository identity, ticker, cap, volume, builders' earnings and Trade action rapidly scannable. Money/volume values align to a consistent edge. Preserve status provenance, including unverified/official distinctions. On phones use a deliberate compact layout, not an impossible horizontally clipped table. + +### Market (/token/[mint]) +Chart plus trade panel is the main event. Visually distinguish finalized and confirming data, unavailable values, price/estimated market cap, DBC vs DAMM history, token amounts and USD estimates. A zero is not a missing value. An estimate is not a historical fact. Preserve range controls and keyboard access, and do not bury slippage/fees behind decoration. + +### Launch (/launch and launch review) +A short step-by-step flow: repository lookup -> immutable identity -> token image/cost preview -> wallet review/signing. Clarify community launch vs owner endorsement. Nothing looks successful until actually confirmed. Never casually change initial buy, quote, supply or signing flows. + +### Builders/claims and operations +Evidence-led: who owns what, what is available to claim, what is verified, what is pending, what cannot be acted on. Low decoration, high traceability. Do not make back-office operator tools look like a public CTA. + +## Visual direction + +- **90% trusted finance app; 10% carefully placed retro weirdness.** Do not turn dense trading screens into full-screen CRT art. +- Prefer one distinctive product object per screen: GitHub repo name/commit strip, graduation progress, real fee record, or Repo Cat artwork. Not generic neon icon cards. +- Soft small and medium radii in controls are intentional. Keep hierarchy between the large hero, measured numeric data, utility labels and muted metadata. +- Mint green communicates primary buy/positive/action where appropriate. Red is a trade side/warning when semantics require it. Amber is for meaningful caution/status. Never communicate buy/sell solely by colour. +- Stick to the current product's dual themes. No blanket ban on grid lines, hairlines, glows or monospace if already part of repo.ing. Use these with intent, not everywhere. +- No floating unrelated stickers or invented mascot anatomy in transaction surfaces. + +## Prototype vs live + +Local fixtures are permitted to test empty/loading/error flows if clearly marked and never connected to production/API code. Do not introduce promotional "example earnings" into real market tables. Do not screenshot account secrets, wallets, or privileged operator controls. No real signing for design validation. + +## To improve next, after approval + +Audit /explore first for density and phone composition, then the market chart/trade hierarchy, then the launch review clarity. Do each as a small before/after change with proof; do not overhaul every route in one pass. \ No newline at end of file diff --git a/design/repo-taste/tokens/repoing.css b/design/repo-taste/tokens/repoing.css new file mode 100644 index 00000000..e38fcac0 --- /dev/null +++ b/design/repo-taste/tokens/repoing.css @@ -0,0 +1,37 @@ +/* + * Repo Taste reference aliases (opt-in). + * NOT imported anywhere by the running app. + * The actual, authoritative theme tokens live in app/globals.css and app/theme.css. + * Copy only the aliases needed by a new design component; do not introduce + * a second competing global token palette. + */ +:root { + --rt-bg: var(--bg, #101213); + --rt-surface: var(--surface, #17191b); + --rt-surface-raised: var(--surface2, #1c1f21); + --rt-rule: var(--border, #32373a); + --rt-rule-strong: var(--border-strong, #464d52); + --rt-ink: var(--text, #f4f6fa); + --rt-muted: var(--muted, #aeb6c1); + --rt-dim: var(--dim, #7f8892); + --rt-action: var(--green, #81e6ad); + --rt-action-strong: var(--green-dark, #63d997); + --rt-danger: var(--red, #f28485); + + --rt-space-1: 4px; + --rt-space-2: 8px; + --rt-space-3: 12px; + --rt-space-4: 16px; + --rt-space-6: 24px; + --rt-space-8: 32px; + --rt-radius-control: 8px; + --rt-radius-panel: 12px; + --rt-radius-tactile: 16px; + --rt-touch-target: 44px; + --rt-ease-out: cubic-bezier(.16, 1, .3, 1); + --rt-duration-fast: 150ms; + --rt-duration-standard: 240ms; +} +@media (prefers-reduced-motion: reduce) { + /* Motion in a consuming component must also have a static fallback. */ +}