@ciderpress/ui 1.0.0-rc.1

package/dist/theme/styles/themes/arcade-fx.css

@@ -0,0 +1,366 @@
+/**
+ * Arcade theme — custom hover animations and visual effects.
+ *
+ * All rules are scoped to html[data-cp-theme='arcade'] so they
+ * only activate when the arcade palette is in use.
+ *
+ * Effects:
+ *   1. Border trace — conic-gradient that spins around cards on hover
+ *   2. Neon pulse  — expanding glow ring on buttons
+ *   3. CRT scanlines — subtle scrolling overlay on code blocks
+ *   4. Link glow — neon underline sweep on hover
+ *   5. Sidebar + navbar hover — neon underline sweep
+ *   6. Sidebar active glow bar
+ */
+
+/* ── @property for animatable gradient angle ─────────────── */
+@property --arcade-border-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
+/* ── 1. Border trace — cards ─────────────────────────────── */
+
+/*
+ * Uses a conic-gradient as the border-image source.
+ * The --arcade-border-angle custom property is animated from
+ * 0deg to 360deg, creating a neon light tracing the border.
+ *
+ * Requires position: relative and overflow: hidden on the card
+ * so the ::before pseudo-element stays within bounds.
+ */
+html[data-cp-theme='arcade'] .cp-card,
+html[data-cp-theme='arcade'] .cp-section-card {
+  position: relative;
+  overflow: hidden;
+  --arcade-border-angle: 0deg;
+}
+
+html[data-cp-theme='arcade'] .cp-card::before,
+html[data-cp-theme='arcade'] .cp-section-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: conic-gradient(
+    from var(--arcade-border-angle),
+    transparent 40%,
+    #00ff88 50%,
+    #00ffcc 55%,
+    transparent 60%
+  );
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity 0.3s;
+  pointer-events: none;
+  z-index: 1;
+}
+
+html[data-cp-theme='arcade'] .cp-card:hover::before,
+html[data-cp-theme='arcade'] .cp-card:focus-visible::before,
+html[data-cp-theme='arcade'] .cp-section-card:hover::before,
+html[data-cp-theme='arcade'] .cp-section-card:focus-visible::before {
+  opacity: 1;
+  animation: arcade-border-spin 2.5s linear infinite;
+}
+
+/* Glow shadow behind the card on hover */
+html[data-cp-theme='arcade'] .cp-card:hover,
+html[data-cp-theme='arcade'] .cp-card:focus-visible,
+html[data-cp-theme='arcade'] .cp-section-card:hover,
+html[data-cp-theme='arcade'] .cp-section-card:focus-visible {
+  box-shadow:
+    0 0 12px rgba(0, 255, 136, 0.15),
+    0 0 24px rgba(0, 255, 136, 0.06);
+}
+
+@keyframes arcade-border-spin {
+  to {
+    --arcade-border-angle: 360deg;
+  }
+}
+
+/* ── 2. Neon pulse — buttons ─────────────────────────────── */
+
+/*
+ * Replace the default gradient with a solid neon brand color,
+ * dark text for contrast, and a subtle border glow on hover.
+ */
+html[data-cp-theme='arcade'] .rp-button--brand {
+  background: #7c3aed;
+  color: #fff;
+  border: 1px solid #7c3aed;
+  opacity: 1;
+}
+
+html[data-cp-theme='arcade'] .rp-button--brand:hover {
+  background: transparent;
+  color: #a78bfa;
+  border-color: #a78bfa;
+  opacity: 1;
+  box-shadow:
+    0 0 8px rgba(124, 58, 237, 0.5),
+    inset 0 0 8px rgba(124, 58, 237, 0.15);
+}
+
+/*
+ * Alt button — outlined style with neon border.
+ */
+html[data-cp-theme='arcade'] .rp-button--alt {
+  background: transparent;
+  color: var(--cp-c-text-1);
+  border: 1px solid var(--cp-c-border);
+}
+
+html[data-cp-theme='arcade'] .rp-button--alt:hover {
+  border-color: #a78bfa;
+  color: #a78bfa;
+  opacity: 1;
+  background: transparent;
+  box-shadow:
+    0 0 8px rgba(124, 58, 237, 0.3),
+    inset 0 0 8px rgba(124, 58, 237, 0.06);
+}
+
+/*
+ * On hover, hero action buttons emit an expanding ring pulse
+ * using box-shadow animation. The ring fades out as it expands.
+ */
+html[data-cp-theme='arcade'] .rp-button--medium,
+html[data-cp-theme='arcade'] .rp-button--big {
+  transition:
+    background 0.2s,
+    box-shadow 0.2s,
+    transform 0.2s;
+}
+
+html[data-cp-theme='arcade'] .rp-button--medium:hover,
+html[data-cp-theme='arcade'] .rp-button--big:hover {
+  transform: scale(1.03);
+  animation: arcade-neon-pulse 1.4s ease-out infinite;
+}
+
+@keyframes arcade-neon-pulse {
+  0% {
+    box-shadow:
+      0 0 4px rgba(124, 58, 237, 0.6),
+      0 0 0 0 rgba(124, 58, 237, 0.4);
+  }
+  70% {
+    box-shadow:
+      0 0 8px rgba(124, 58, 237, 0.3),
+      0 0 0 12px rgba(124, 58, 237, 0);
+  }
+  100% {
+    box-shadow:
+      0 0 4px rgba(124, 58, 237, 0.6),
+      0 0 0 0 rgba(124, 58, 237, 0);
+  }
+}
+
+/* ── 3. CRT scanlines — code blocks ──────────────────────── */
+
+/*
+ * A repeating linear-gradient of thin semi-transparent lines
+ * scrolls slowly down code blocks, simulating a CRT monitor.
+ * pointer-events: none keeps the overlay non-interactive.
+ *
+ * Rspress wraps code blocks in .rp-codeblock which already
+ * has position: relative. The overlay targets .rp-codeblock__content
+ * (the inner container with the background color) so it sits
+ * above the code but below the title bar and button group.
+ */
+html[data-cp-theme='arcade'] .rp-codeblock__content {
+  position: relative;
+}
+
+html[data-cp-theme='arcade'] .rp-codeblock__content::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(
+    to bottom,
+    transparent 0px,
+    transparent 3px,
+    rgba(0, 255, 136, 0.08) 3px,
+    rgba(0, 255, 136, 0.08) 4px
+  );
+  animation: arcade-scanline 8s linear infinite;
+  pointer-events: none;
+  z-index: 2;
+  opacity: 1;
+  transition: opacity 0.3s ease;
+}
+
+html[data-cp-theme='arcade'] .rp-codeblock:hover .rp-codeblock__content::after {
+  opacity: 0;
+}
+
+@keyframes arcade-scanline {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 0 200px;
+  }
+}
+
+/* ── 4. Link glow — neon underline sweep ─────────────────── */
+
+/*
+ * Content links get a neon underline that sweeps in from the
+ * left on hover, paired with a subtle text-shadow glow.
+ *
+ * Rspress uses a.rp-link for content links inside .rp-doc.
+ * Header anchors use .rp-header-anchor and are excluded.
+ */
+html[data-cp-theme='arcade'] .rp-doc a.rp-link:not(.rp-header-anchor) {
+  text-decoration: none;
+  background-image: linear-gradient(#00ff88, #00ff88);
+  background-size: 0% 1.5px;
+  background-position: 0 100%;
+  background-repeat: no-repeat;
+  transition:
+    background-size 0.3s ease,
+    text-shadow 0.3s ease;
+}
+
+html[data-cp-theme='arcade'] .rp-doc a.rp-link:not(.rp-header-anchor):hover {
+  background-size: 100% 1.5px;
+  border-bottom: none;
+  text-shadow:
+    0 0 6px rgba(0, 255, 136, 0.5),
+    0 0 12px rgba(0, 255, 136, 0.2);
+}
+
+/* ── 5. Sidebar + navbar link hover — neon underline sweep ── */
+
+/*
+ * Same sweep effect as doc content links, adapted for
+ * sidebar items (.rp-sidebar-item) and navbar menu items
+ * (.rp-nav-menu__item). Uses a background-image gradient
+ * that expands from 0% to 100% width on hover.
+ */
+html[data-cp-theme='arcade'] .rp-sidebar-item {
+  text-decoration: none;
+  background-image: linear-gradient(#00ff88, #00ff88);
+  background-size: 0% 1.5px;
+  background-position: 0 100%;
+  background-repeat: no-repeat;
+  transition:
+    color 0.15s,
+    background-color 0.15s,
+    background-size 0.3s ease,
+    text-shadow 0.3s ease;
+}
+
+html[data-cp-theme='arcade'] .rp-sidebar-item:hover {
+  background-size: 100% 1.5px;
+  text-shadow:
+    0 0 6px rgba(0, 255, 136, 0.5),
+    0 0 12px rgba(0, 255, 136, 0.2);
+}
+
+html[data-cp-theme='arcade'] .rp-nav-menu__item {
+  text-decoration: none;
+  background-image: linear-gradient(#00ff88, #00ff88);
+  background-size: 0% 1.5px;
+  background-position: 0 100%;
+  background-repeat: no-repeat;
+  transition:
+    color 0.25s,
+    background-size 0.3s ease,
+    text-shadow 0.3s ease;
+}
+
+html[data-cp-theme='arcade'] .rp-nav-menu__item:hover {
+  background-size: 100% 1.5px;
+  text-shadow:
+    0 0 6px rgba(0, 255, 136, 0.5),
+    0 0 12px rgba(0, 255, 136, 0.2);
+}
+
+/* ── 6. Sidebar active glow bar ──────────────────────────── */
+
+/*
+ * The active sidebar item gets a left-border glow that
+ * scales in vertically, simulating a neon indicator light.
+ *
+ * Rspress uses .rp-sidebar-item--active (BEM double hyphen).
+ * It already has position: relative. Uses ::after because
+ * ::before is used by Rspress for group-item line indicators.
+ */
+html[data-cp-theme='arcade'] .rp-sidebar-item--active {
+  overflow: visible;
+}
+
+html[data-cp-theme='arcade'] .rp-sidebar-item--active::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 2px;
+  height: 0;
+  background: #00ff88;
+  box-shadow:
+    0 0 4px rgba(0, 255, 136, 0.8),
+    0 0 8px rgba(0, 255, 136, 0.4);
+  border-radius: 1px;
+  animation: arcade-glow-bar 0.3s ease-out forwards;
+}
+
+@keyframes arcade-glow-bar {
+  to {
+    height: 60%;
+    top: 20%;
+  }
+}
+
+/* ── 7. Search results — readable highlight ────────────── */
+
+/*
+ * The default search highlight uses --rp-c-brand (#00ff88)
+ * as a background, which is too bright for white text.
+ * Override to a darker green that maintains the neon feel
+ * while ensuring legibility.
+ */
+html[data-cp-theme='arcade'] .rp-suggest-item--current .rp-suggest-item__link {
+  background-color: #007a42;
+}
+
+html[data-cp-theme='arcade'] .rp-suggest-item__mark {
+  color: #00ff88;
+}
+
+html[data-cp-theme='arcade'] .rp-suggest-item--current .rp-suggest-item__mark {
+  color: #fff;
+}
+
+/* ── Reduced motion ──────────────────────────────────────── */
+
+/*
+ * Disable all continuous and hover-triggered animations when
+ * the user has opted into reduced motion.
+ */
+@media (prefers-reduced-motion: reduce) {
+  html[data-cp-theme='arcade'] .cp-card:hover::before,
+  html[data-cp-theme='arcade'] .cp-card:focus-visible::before,
+  html[data-cp-theme='arcade'] .cp-section-card:hover::before,
+  html[data-cp-theme='arcade'] .cp-section-card:focus-visible::before,
+  html[data-cp-theme='arcade'] .rp-codeblock__content::after,
+  html[data-cp-theme='arcade'] .rp-sidebar-item--active::after {
+    animation: none;
+  }
+
+  html[data-cp-theme='arcade'] .rp-button--medium:hover,
+  html[data-cp-theme='arcade'] .rp-button--big:hover {
+    animation: none;
+    transform: none;
+  }
+}

package/dist/theme/styles/themes/arcade.css

@@ -0,0 +1,273 @@
+/* GENERATED — DO NOT EDIT — run scripts/generate-theme-css.mjs */
+
+html[data-cp-theme='arcade'][data-cp-variant='dark'] {
+  --cp-c-brand-1: #00ff88;
+  --cp-c-brand-2: #00cc6a;
+  --cp-c-brand-3: #00aa55;
+  --cp-c-brand-fg: #001a0a;
+  --cp-c-brand-soft: rgba(0, 255, 136, 0.14);
+  --cp-c-on-brand: #001a0a;
+  --cp-c-brand-light: #66ffbb;
+  --cp-c-brand-lighter: #99ffcc;
+  --cp-c-success: #16a34a;
+  --cp-c-error: #dc2626;
+  --cp-c-warn: #d97706;
+  --cp-c-info: #2563eb;
+  --cp-c-muted: #888888;
+  --cp-c-bg: #0d0d1a;
+  --cp-c-bg-alt: #10102a;
+  --cp-c-bg-elv: #141433;
+  --cp-c-bg-soft: #18183d;
+  --cp-c-bg-icon: #2a2a55;
+  --cp-c-home-bg: #0d0d1a;
+  --cp-c-overlay-faint: rgba(102, 255, 187, 0.14);
+  --cp-c-gutter: #10102a;
+  --cp-code-block-bg: #10102a;
+  --cp-c-text-1: #e0ffe0;
+  --cp-c-text-2: rgba(224, 255, 224, 0.72);
+  --cp-c-text-3: rgba(224, 255, 224, 0.48);
+  --cp-c-border: #252560;
+  --cp-c-divider: #1a1a40;
+  --cp-c-sidebar-alt-border-dark: #484848;
+  --cp-c-tint-purple-bg: rgba(167, 139, 250, 0.12);
+  --cp-c-tint-purple-fg: #a78bfa;
+  --cp-c-tint-blue-bg: rgba(96, 165, 250, 0.12);
+  --cp-c-tint-blue-fg: #60a5fa;
+  --cp-c-tint-green-bg: rgba(52, 211, 153, 0.12);
+  --cp-c-tint-green-fg: #34d399;
+  --cp-c-tint-amber-bg: rgba(251, 191, 36, 0.12);
+  --cp-c-tint-amber-fg: #fbbf24;
+  --cp-c-tint-red-bg: rgba(248, 113, 113, 0.12);
+  --cp-c-tint-red-fg: #f87171;
+  --cp-c-tint-slate-bg: rgba(148, 163, 184, 0.12);
+  --cp-c-tint-slate-fg: #94a3b8;
+  --cp-c-tint-cyan-bg: rgba(14, 165, 233, 0.12);
+  --cp-c-tint-cyan-fg: #0ea5e9;
+  --cp-c-tint-pink-bg: rgba(244, 114, 182, 0.12);
+  --cp-c-tint-pink-fg: #f472b6;
+  --cp-c-tint-purple-bright-fg: #c084fc;
+  --cp-c-tint-amber-bright-fg: #fcd34d;
+  --cp-c-tint-purple-glow: rgba(167, 139, 250, 0.08);
+  --cp-c-term-bg: #0d0d0d;
+  --cp-c-term-titlebar-bg: #161616;
+  --cp-c-term-border: #222222;
+  --cp-c-term-title: #888888;
+  --cp-c-term-text: #d4d4d4;
+  --cp-c-term-prompt-prefix: #888888;
+  --cp-c-term-output: #aaaaaa;
+  --cp-c-term-red: #f87171;
+  --cp-c-term-green: #4ade80;
+  --cp-c-term-blue: #60a5fa;
+  --cp-c-term-yellow: #fbbf24;
+  --cp-c-term-cyan: #22d3ee;
+  --cp-c-term-magenta: #c084fc;
+  --cp-c-term-white: #f5f5f5;
+  --cp-c-term-gray: #888888;
+  --cp-c-term-success: #4ade80;
+  --cp-c-term-error: #f87171;
+  --cp-c-term-warn: #fbbf24;
+  --cp-c-term-info: #60a5fa;
+  --cp-c-term-muted: #888888;
+  --cp-c-term-bar: #888888;
+  --cp-c-term-step: #c084fc;
+  --cp-c-window-dot-close: #ff5f57;
+  --cp-c-window-dot-minimize: #febc2e;
+  --cp-c-window-dot-maximize: #28c840;
+  --cp-c-window-title-fallback: #888888;
+  --cp-c-badge-info-bg: rgba(37, 99, 235, 0.12);
+  --cp-c-badge-info-fg: #2563eb;
+  --cp-c-badge-success-bg: rgba(16, 185, 129, 0.12);
+  --cp-c-badge-success-fg: #059669;
+  --cp-c-badge-warning-bg: rgba(217, 119, 6, 0.12);
+  --cp-c-badge-warning-fg: #d97706;
+  --cp-c-badge-error-bg: rgba(220, 38, 38, 0.12);
+  --cp-c-badge-error-fg: #dc2626;
+  --cp-c-scrollbar-thumb: #3a3a3a;
+  --cp-c-scrollbar-thumb-hover: #4a4a4a;
+  --cp-c-syntax-kw: #c084fc;
+  --cp-c-syntax-str: #fcd34d;
+  --cp-c-syntax-fn: #60a5fa;
+  --cp-c-gradient-hero-cyan: #06b6d4;
+  --cp-c-gradient-hero-purple: #a855f7;
+  --cp-oas-get: #00ff88;
+  --cp-oas-post: #00ccff;
+  --cp-oas-put: #ffaa00;
+  --cp-oas-patch: #ffaa00;
+  --cp-oas-delete: #ff4466;
+  --cp-oas-deprecated: var(--cp-c-text-3);
+  --cp-oas-required: #ff4466;
+  --cp-button-brand-bg: #00aa55;
+  --cp-button-brand-hover-bg: #00cc6a;
+  --cp-button-brand-active-bg: #008844;
+  --cp-button-brand-text: #0d0d1a;
+  --cp-s-1: 1px;
+  --cp-s-2: 2px;
+  --cp-s-3: 3px;
+  --cp-s-4: 4px;
+  --cp-s-5: 5px;
+  --cp-s-6: 6px;
+  --cp-s-8: 8px;
+  --cp-s-10: 10px;
+  --cp-s-12: 12px;
+  --cp-s-14: 14px;
+  --cp-s-16: 16px;
+  --cp-s-18: 18px;
+  --cp-s-20: 20px;
+  --cp-s-24: 24px;
+  --cp-s-28: 28px;
+  --cp-s-32: 32px;
+  --cp-s-40: 40px;
+  --cp-s-48: 48px;
+  --cp-s-56: 56px;
+  --cp-s-64: 64px;
+  --cp-s-72: 72px;
+  --cp-s-96: 96px;
+  --cp-radius-xs: 2px;
+  --cp-radius-xs-sm: 3px;
+  --cp-radius-sm: 4px;
+  --cp-radius-md-sm: 6px;
+  --cp-radius-md: 8px;
+  --cp-radius-lg: 10px;
+  --cp-radius-md-lg: 12px;
+  --cp-radius-pill: 9999px;
+  --cp-ff-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
+  --cp-ff-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-fw-regular: 400;
+  --cp-fw-medium: 500;
+  --cp-fw-semibold: 600;
+  --cp-fw-bold: 700;
+  --cp-fs-body: 16px;
+  --cp-fs-btn: 14px;
+  --cp-fs-bullet: 14px;
+  --cp-fs-code: 13px;
+  --cp-fs-eyebrow: 11px;
+  --cp-fs-tagline: 18px;
+  --cp-fs-hero-title: clamp(40px, 6.5vw, 76px);
+  --cp-fs-split-title: clamp(28px, 4vw, 40px);
+  --cp-fs-feature-title: 18px;
+  --cp-fs-feature-desc: 16px;
+  --cp-fs-feature-link: 12px;
+  --cp-fs-section-title: 14px;
+  --cp-fs-section-desc: 12.5px;
+  --cp-fs-badge: 11px;
+  --cp-fs-tooltip: 13px;
+  --cp-fs-tooltip-headline: 13px;
+  --cp-fs-tooltip-cta: 12px;
+  --cp-fs-check: 11px;
+  --cp-fs-field-name: 14px;
+  --cp-fs-field-type: 11px;
+  --cp-fs-field-badge: 11px;
+  --cp-fs-field-default: 12px;
+  --cp-fs-field-default-code: 11px;
+  --cp-fs-field-body: 14px;
+  --cp-fs-field-group-title: 14px;
+  --cp-fs-field-trigger: 12px;
+  --cp-fs-prompt-desc: 14px;
+  --cp-fs-prompt-feedback: 12px;
+  --cp-fs-prompt-btn: 12px;
+  --cp-fs-prompt-menu-item: 13px;
+  --cp-fs-prompt-menu-desc: 11px;
+  --cp-fs-color-name: 12px;
+  --cp-fs-color-value: 11px;
+  --cp-fs-window-title: 12px;
+  --cp-fs-window-tab: 12px;
+  --cp-fs-window-url: 11px;
+  --cp-fs-term-body: 13px;
+  --cp-fs-demo-title: 11px;
+  --cp-fs-demo-body: 13px;
+  --cp-fs-ask-ai: 13px;
+  --cp-fs-ask-ai-mark: 10px;
+  --cp-fs-ask-ai-shortcut: 10px;
+  --cp-fs-sidebar-link: 14px;
+  --cp-shadow-card-hover: 0 2px 12px var(--cp-c-tint-purple-glow);
+  --cp-shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.12);
+  --cp-shadow-tooltip: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --cp-shadow-hero-demo:
+    0 0 0 1px rgba(0, 0, 0, 0.5), 0 24px 48px -12px rgba(0, 0, 0, 0.6),
+    0 0 80px var(--cp-c-brand-soft);
+  --cp-shadow-ask-ai: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(0, 0, 0, 0.5);
+  --cp-duration-fast: 0.15s;
+  --cp-duration-base: 0.2s;
+  --cp-ease-base: ease;
+  --cp-z-dropdown: 50;
+  --cp-z-floating: 60;
+  --cp-z-tooltip: 100;
+  --cp-lh-display: 1;
+  --cp-lh-tight: 1.4;
+  --cp-lh-tighter: 1.3;
+  --cp-lh-snug: 1.45;
+  --cp-lh-base: 1.5;
+  --cp-lh-relaxed: 1.6;
+  --cp-lh-demo: 1.65;
+  --cp-lh-code: 1.7;
+  --cp-lh-sidebar: 24px;
+  --cp-letter-wide: 0.02em;
+  --cp-letter-eyebrow: 0.1em;
+  --cp-letter-display: -0.025em;
+  --cp-letter-hero: -0.04em;
+  --cp-opacity-muted: 0.5;
+  --cp-opacity-deprecated: 0.6;
+  --cp-opacity-hover: 0.8;
+  --cp-size-titlebar: 36px;
+  --cp-size-window-dot: 10px;
+  --cp-size-window-tab-dot: 6px;
+  --cp-size-browser-tab-max: 200px;
+  --cp-size-browser-icon: 14px;
+  --cp-size-browser-urlbar: 28px;
+  --cp-size-icon-box: 36px;
+  --cp-size-icon-box-sm: 28px;
+  --cp-size-icon-svg: 18px;
+  --cp-size-icon-svg-sm: 16px;
+  --cp-size-icon-sm: 16px;
+  --cp-size-content-max: 1152px;
+  --cp-size-focus-ring: 2px;
+  --cp-size-focus-ring-offset: 2px;
+  --cp-size-tooltip-max: 320px;
+  --cp-size-swatch: 24px;
+  --cp-size-demo-max: 920px;
+  --cp-size-split-max: 1200px;
+  --cp-size-hero-grid: 24px;
+  --cp-size-hero-max: 1100px;
+  --cp-size-tagline-max: 640px;
+  --cp-size-prompt-icon: 20px;
+  --cp-size-prompt-btn: 30px;
+  --cp-size-menu-min: 220px;
+  --cp-size-prompt-menu-icon: 18px;
+  --cp-size-check: 18px;
+  --cp-size-chevron: 14px;
+  --cp-size-ask-ai-icon: 18px;
+  --cp-size-sidebar-circle: 36px;
+  --cp-size-scrollbar: 6px;
+  --cp-bp-sm: 768px;
+  --cp-bp-md: 720px;
+  --cp-bp-md-lg: 880px;
+  --cp-bp-content: 1184px;
+  --cp-blur-base: 8px;
+  --cp-gradient-brand: linear-gradient(135deg, var(--cp-c-brand-1), var(--cp-c-brand-3));
+  --cp-gradient-hero-title: linear-gradient(135deg, var(--cp-c-brand-1), var(--cp-c-brand-light));
+  --rp-c-bg: #0d0d1a;
+  --rp-c-bg-alt: #10102a;
+  --rp-c-bg-dark: #10102a;
+  --rp-c-bg-mute: #0d0d1a;
+  --rp-c-bg-soft: #18183d;
+  --rp-c-brand: #00ff88;
+  --rp-c-brand-light: #66ffbb;
+  --rp-c-brand-lighter: #99ffcc;
+  --rp-c-brand-dark: #00cc6a;
+  --rp-c-brand-darker: #00aa55;
+  --rp-c-brand-tint: rgba(0, 255, 136, 0.14);
+  --rp-c-divider: #1a1a40;
+  --rp-c-divider-dark: #252560;
+  --rp-c-divider-light: #1a1a40;
+  --rp-c-link: #00ff88;
+  --rp-c-text-1: #e0ffe0;
+  --rp-c-text-2: rgba(224, 255, 224, 0.72);
+  --rp-c-text-3: rgba(224, 255, 224, 0.48);
+  --rp-c-text-4: rgba(224, 255, 224, 0.48);
+  --rp-c-text-code: #e0ffe0;
+  --rp-code-block-bg: #10102a;
+  --rp-home-background-bg: #0d0d1a;
+  --rp-home-feature-bg: #18183d;
+  --rp-home-hero-secondary-color: rgba(224, 255, 224, 0.72);
+  --rp-home-hero-title-color: #e0ffe0;
+}