@gradial/aci 0.1.20-preview.3 → 0.1.20

package/templates/astro/template/src/components/elements/RemoteImage.astro

@@ -0,0 +1,41 @@
+---
+import { Image } from 'astro:assets';
+
+interface Props {
+  src: string;
+  alt: string;
+  className?: string;
+  width?: number;
+  height?: number;
+  srcset?: string;
+  sizes?: string;
+  loading?: 'lazy' | 'eager';
+}
+
+const { src, alt, className = '', width, height, srcset, sizes, loading = 'lazy' } = Astro.props;
+const isStorybook = !!import.meta.env.STORYBOOK;
+---
+
+{isStorybook ? (
+  <img
+    class={className}
+    src={src}
+    alt={alt}
+    width={width}
+    height={height}
+    srcset={srcset}
+    sizes={sizes}
+    loading={loading}
+    decoding="async"
+  />
+) : (
+  <Image
+    class={className}
+    src={src}
+    alt={alt}
+    width={width || 1200}
+    height={height || 630}
+    sizes={sizes}
+    loading={loading}
+  />
+)}

package/templates/astro/template/src/components/sections/ContainerSection.astro

@@ -0,0 +1,32 @@
+---
+import Container from '../elements/Container.astro';
+import type { RenderChildren, RenderableBlock } from '@gradial/aci/astro';
+
+interface Props {
+  theme?: 'auto' | 'light' | 'dark';
+  className?: string;
+  content?: any[];
+  renderChildren?: RenderChildren;
+}
+
+const { theme = 'auto', className = '', content, renderChildren } = Astro.props;
+const children: RenderableBlock[] = content && renderChildren ? renderChildren(content) : [];
+const buttonCount = content?.filter((b: any) => b.component === 'button').length ?? 0;
+const layout = buttonCount === 1
+  ? 'flex-col items-center'
+  : 'flex-col items-center sm:flex-row sm:justify-center sm:gap-4';
+---
+
+<section class={`theme-${theme} relative overflow-hidden py-[var(--spacing-section-y)] ${className}`}>
+  {theme === 'dark' ? (
+    <div class="pointer-events-none absolute inset-0 bg-[image:var(--gradient-hero-base)] opacity-30"></div>
+  ) : null}
+  <Container className="relative">
+    <div class={`flex ${layout} gap-6 text-center`}>
+      {children.map((child) => {
+        const Comp = child.Component as any;
+        return Comp ? <Comp {...child.props} /> : null;
+      })}
+    </div>
+  </Container>
+</section>

package/templates/astro/template/src/components/sections/FeatureCard.astro

@@ -0,0 +1,23 @@
+---
+import Icon from '../elements/Icon.astro';
+
+interface Props {
+  icon?: string;
+  title: string;
+  description?: string;
+}
+
+const { icon = '', title = '', description = '' } = Astro.props;
+---
+
+<div class="rounded-card border border-[var(--color-edge-space)] bg-[var(--color-space-surface)] p-[var(--spacing-card)] transition-all duration-[var(--transition-duration-fast)] hover:border-[var(--color-edge-space-strong)] hover:bg-[var(--color-space-raised)] hover:shadow-[var(--shadow-card-default)]">
+  {icon ? (
+    <div class="mb-6 flex h-12 w-12 items-center justify-center rounded-button bg-[color-mix(in_srgb,var(--color-brand-blue)_12%,transparent)] text-[var(--color-brand-blue-light)]">
+      <Icon name={icon} className="h-6 w-6" />
+    </div>
+  ) : null}
+  <h3 class="text-[length:var(--text-size-h3)] font-[var(--font-weight-semibold)]">{title}</h3>
+  {description ? (
+    <p class="mt-3 text-[length:var(--text-size-body)] leading-relaxed text-[var(--color-fg-space-muted)]">{description}</p>
+  ) : null}
+</div>

package/templates/astro/template/src/components/sections/FeatureGrid.astro

@@ -0,0 +1,35 @@
+---
+import Container from '../elements/Container.astro';
+import type { RenderChildren, RenderableBlock } from '@gradial/aci/astro';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  features?: any[];
+  renderChildren?: RenderChildren;
+}
+
+const { title = '', subtitle = '', features, renderChildren } = Astro.props;
+const children: RenderableBlock[] = features && renderChildren ? renderChildren(features) : [];
+const count = features?.length ?? 0;
+const cols = count <= 2 ? 'sm:grid-cols-2' : 'sm:grid-cols-2 lg:grid-cols-3';
+---
+
+<section class="theme-dark py-[var(--spacing-section-y)] bg-[var(--color-space-deep)]">
+  <Container>
+    <div class="mb-12 max-w-[var(--max-width-container-narrow)]">
+      {title ? (
+        <h2 class="text-[length:var(--text-size-h2-mobile)] font-[var(--font-weight-bold)] leading-tight md:text-[length:var(--text-size-h2)]">{title}</h2>
+      ) : null}
+      {subtitle ? (
+        <p class="mt-4 text-[length:var(--text-size-body-large)] leading-relaxed text-[var(--color-fg-space-muted)]">{subtitle}</p>
+      ) : null}
+    </div>
+    <div class={`grid gap-6 ${cols}`}>
+      {children.map((child) => {
+        const Comp = child.Component as any;
+        return Comp ? <Comp {...child.props} /> : null;
+      })}
+    </div>
+  </Container>
+</section>

package/templates/astro/template/src/components/sections/HomeHero.astro

@@ -0,0 +1,51 @@
+---
+import Button from '../elements/Button.astro';
+import Container from '../elements/Container.astro';
+import { imageAttrs, type Image } from '@gradial/aci';
+
+interface Props {
+  eyebrow?: string;
+  headline: string;
+  description?: string;
+  ctaLabel: string;
+  ctaHref: string;
+  image?: Image;
+}
+
+const {
+  eyebrow = '',
+  headline,
+  description = '',
+  ctaLabel,
+  ctaHref,
+  image
+} = Astro.props;
+
+const imgAttrs = image ? imageAttrs(image, {
+  class: 'absolute inset-0 h-full w-full object-cover',
+  loading: 'eager',
+  decoding: 'async',
+}) : null;
+---
+
+<section
+  class="theme-dark relative min-h-[var(--height-hero-min)] overflow-hidden bg-black text-fg"
+  aria-label={image?.alt || headline}
+>
+  {imgAttrs && <img {...imgAttrs} />}
+  <div class="absolute inset-0 bg-[image:var(--gradient-hero-overlay)]"></div>
+  <Container className="relative flex min-h-[var(--height-hero-min)] items-center py-[var(--spacing-section-y)]">
+    <div class="max-w-[var(--width-hero-content)]">
+      {eyebrow ? (
+        <p class="mb-5 text-[length:var(--text-size-eyebrow)] font-[var(--font-weight-semibold)] uppercase tracking-[var(--letter-spacing-label)] text-accent-secondary">{eyebrow}</p>
+      ) : null}
+      <h1 class="[font-family:var(--font-family-heading)] text-[length:var(--text-size-h1-mobile)] font-[var(--font-weight-bold)] leading-tight md:text-[length:var(--text-size-h1)]">{headline}</h1>
+      {description ? (
+        <p class="mt-7 max-w-2xl text-[length:var(--text-size-body-large)] leading-body text-fg">{description}</p>
+      ) : null}
+      <div class="mt-9">
+        <Button href={ctaHref} variant="secondary">{ctaLabel}</Button>
+      </div>
+    </div>
+  </Container>
+</section>

package/templates/astro/template/src/components/sections/StatsBar.astro

@@ -0,0 +1,33 @@
+---
+import Container from '../elements/Container.astro';
+
+interface Stat {
+  label: string;
+  value: string;
+  suffix?: string;
+}
+
+interface Props {
+  stats?: Stat[];
+}
+
+const { stats = [] } = Astro.props;
+---
+
+<section class="theme-dark border-y border-[var(--color-edge-space)] bg-[var(--color-space-surface)] py-[var(--spacing-section-y)]">
+  <Container>
+    <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
+      {stats.map((stat) => (
+        <div class="text-center">
+          <p class="text-[length:var(--text-size-h2-mobile)] font-[var(--font-weight-bold)] leading-tight text-[var(--color-brand-blue-light)] md:text-[length:var(--text-size-h2)]">
+            {stat.value}
+            {stat.suffix ? <span class="text-[var(--color-launch-orange)]">{stat.suffix}</span> : null}
+          </p>
+          <p class="mt-2 text-[length:var(--text-size-body-small)] font-[var(--font-weight-medium)] text-[var(--color-fg-space-muted)] uppercase tracking-[var(--letter-spacing-label)]">
+            {stat.label}
+          </p>
+        </div>
+      ))}
+    </div>
+  </Container>
+</section>

package/templates/astro/template/src/design-system/styles.css

@@ -0,0 +1,399 @@
+@import "tailwindcss" source(none);
+@import "./tokens/index.css";
+
+@source "../../src/**/*.astro";
+@source "../../content/**/*.json";
+@source "../fixtures/**/*.ts";
+
+:root {
+  color-scheme: light;
+}
+
+[dir="rtl"] {
+  --gradient-hero-overlay: var(--gradient-hero-overlay-rtl);
+}
+
+.theme-auto,
+.theme-light {
+  --color-fg: var(--color-fg-primary);
+  --color-fg-muted: var(--color-fg-secondary);
+  --color-surface-default: var(--color-page);
+  --color-surface-raised-default: var(--color-surface-raised);
+  --color-edge: var(--color-border);
+  --color-icon-default: var(--color-accent-primary);
+  --color-link-hover: var(--color-accent-primary);
+  --color-callout-icon-bg-default: var(--color-callout-icon-bg-light);
+  --rich-text-quote-bg-default: var(--rich-text-quote-bg);
+  --rich-text-inline-code-bg-default: var(--rich-text-inline-code-bg);
+  --shadow-card-default: var(--shadow-card);
+  --gradient-cta-default: var(--gradient-cta);
+}
+
+.theme-dark {
+  --color-fg: var(--color-fg-inverse);
+  --color-fg-muted: var(--color-fg-inverse-muted);
+  --color-surface-default: var(--color-page-inverse);
+  --color-surface-raised-default: var(--color-page-inverse);
+  --color-edge: var(--color-edge-inverse);
+  --color-icon-default: var(--color-fg-inverse-muted);
+  --color-link-hover: var(--color-accent-secondary);
+  --rich-text-quote-bg-default: var(--rich-text-quote-bg-dark);
+  --rich-text-inline-code-bg-default: var(--rich-text-inline-code-bg-dark);
+  --shadow-card-default: var(--shadow-card-dark);
+  --gradient-cta-default: var(--gradient-cta-dark);
+  --button-primary-bg: var(--color-white);
+  --button-primary-text: var(--color-black);
+  --button-primary-border: var(--color-white);
+  --button-secondary-bg: transparent;
+  --button-secondary-text: var(--color-white);
+  --button-secondary-border: var(--color-white);
+  --button-outline-bg: transparent;
+  --button-outline-text: var(--color-white);
+  --button-outline-border: var(--color-edge-inverse);
+  --button-tertiary-text: var(--color-accent-secondary);
+}
+
+.theme-accent {
+  --color-fg: var(--color-black);
+  --color-fg-muted: var(--color-black);
+  --color-surface-default: var(--color-accent-secondary);
+  --color-surface-raised-default: var(--color-accent-secondary);
+  --color-edge: transparent;
+  --color-icon-default: var(--color-black);
+  --color-link-hover: var(--color-black);
+  --gradient-cta-default: var(--gradient-cta);
+}
+
+.theme-dark .theme-auto {
+  --color-fg: var(--color-fg-inverse);
+  --color-fg-muted: var(--color-fg-inverse-soft);
+  --color-surface-default: var(--color-page-dark);
+  --color-surface-raised-default: var(--color-surface-raised-dark);
+  --color-edge: var(--color-edge-dark);
+  --color-icon-default: var(--color-accent-secondary);
+  --color-link-hover: var(--color-accent-secondary);
+  --color-callout-icon-bg: var(--color-callout-icon-bg-dark);
+  --rich-text-quote-bg-default: var(--rich-text-quote-bg-dark);
+  --rich-text-inline-code-bg-default: var(--rich-text-inline-code-bg-dark);
+  --shadow-card-default: var(--shadow-card-dark);
+  --gradient-cta-default: var(--gradient-cta-dark);
+  --button-primary-bg: var(--color-white);
+  --button-primary-text: var(--color-black);
+  --button-primary-border: var(--color-white);
+  --button-secondary-bg: transparent;
+  --button-secondary-text: var(--color-white);
+  --button-secondary-border: var(--color-white);
+  --button-outline-bg: transparent;
+  --button-outline-text: var(--color-white);
+  --button-outline-border: var(--color-edge-inverse);
+  --button-tertiary-text: var(--color-accent-secondary);
+}
+
+.theme-dark .theme-accent {
+  --color-fg: var(--color-fg-inverse);
+  --color-fg-muted: var(--color-fg-inverse-soft);
+  --color-surface-default: var(--color-surface-dark);
+  --color-surface-raised-default: var(--color-surface-raised-dark);
+  --color-edge: var(--color-edge-dark);
+  --color-icon-default: var(--color-accent-secondary);
+  --color-link-hover: var(--color-accent-secondary);
+  --rich-text-quote-bg-default: var(--rich-text-quote-bg-dark);
+  --rich-text-inline-code-bg-default: var(--rich-text-inline-code-bg-dark);
+  --gradient-cta-default: var(--gradient-cta-dark);
+}
+
+.bm-header {
+  background: var(--header-bg);
+  --color-fg: var(--header-text);
+  --color-fg-muted: var(--header-muted);
+  --color-edge: var(--header-border);
+  --color-link-hover: var(--header-link-hover);
+  --color-icon-default: var(--header-icon);
+  --button-secondary-text: var(--color-white);
+  --button-secondary-border: var(--color-white);
+  --button-outline-text: var(--color-white);
+  --button-outline-border: var(--header-border);
+}
+
+.bm-footer {
+  background: var(--footer-bg);
+  --color-fg: var(--footer-text);
+  --color-fg-muted: var(--footer-muted);
+  --color-edge: var(--footer-border);
+  --color-link-hover: var(--footer-link-hover);
+  --color-icon-default: var(--footer-muted);
+  --button-primary-bg: var(--color-white);
+  --button-primary-text: var(--color-black);
+  --button-primary-border: var(--color-white);
+  --button-secondary-text: var(--color-white);
+  --button-secondary-border: var(--color-white);
+  --button-outline-text: var(--color-white);
+  --button-outline-border: var(--footer-border);
+  --button-tertiary-text: var(--footer-link-hover);
+}
+
+.bm-mobile-nav {
+  background: var(--mobile-nav-bg);
+  --color-fg: var(--mobile-nav-text);
+  --color-fg-muted: var(--mobile-nav-muted);
+  --color-edge: var(--mobile-nav-border);
+  --color-link-hover: var(--mobile-nav-link-hover);
+  --color-icon-default: var(--mobile-nav-muted);
+  --button-primary-bg: var(--color-white);
+  --button-primary-text: var(--color-black);
+  --button-primary-border: var(--color-white);
+  --button-secondary-text: var(--color-white);
+  --button-secondary-border: var(--color-white);
+  --button-outline-text: var(--color-white);
+  --button-outline-border: var(--mobile-nav-border);
+  --button-tertiary-text: var(--mobile-nav-link-hover);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+    --color-fg: var(--color-fg-inverse);
+    --color-fg-muted: var(--color-fg-inverse-soft);
+    --color-surface-default: var(--color-page-dark);
+    --color-surface-raised-default: var(--color-surface-raised-dark);
+    --color-chrome-surface-default: var(--color-chrome-surface);
+    --color-edge: var(--color-edge-dark);
+    --color-icon-default: var(--color-accent-secondary);
+    --color-link-hover: var(--color-accent-secondary);
+    --color-callout-icon-bg: var(--color-callout-icon-bg-dark);
+    --rich-text-quote-bg-default: var(--rich-text-quote-bg-dark);
+    --rich-text-inline-code-bg-default: var(--rich-text-inline-code-bg-dark);
+    --shadow-card-default: var(--shadow-card-dark);
+    --gradient-cta-default: var(--gradient-cta-dark);
+    --button-primary-bg: var(--color-white);
+    --button-primary-text: var(--color-black);
+    --button-primary-border: var(--color-white);
+    --button-secondary-bg: transparent;
+    --button-secondary-text: var(--color-white);
+    --button-secondary-border: var(--color-white);
+    --button-outline-bg: transparent;
+    --button-outline-text: var(--color-white);
+    --button-outline-border: var(--color-edge-inverse);
+    --button-tertiary-text: var(--color-accent-secondary);
+  }
+
+  .theme-auto {
+    --color-fg: var(--color-fg-inverse);
+    --color-fg-muted: var(--color-fg-inverse-soft);
+    --color-surface-default: var(--color-page-dark);
+    --color-surface-raised-default: var(--color-surface-raised-dark);
+    --color-edge: var(--color-edge-dark);
+    --color-icon-default: var(--color-accent-secondary);
+    --color-link-hover: var(--color-accent-secondary);
+    --color-callout-icon-bg: var(--color-callout-icon-bg-dark);
+    --rich-text-quote-bg-default: var(--rich-text-quote-bg-dark);
+    --rich-text-inline-code-bg-default: var(--rich-text-inline-code-bg-dark);
+    --shadow-card-default: var(--shadow-card-dark);
+    --gradient-cta-default: var(--gradient-cta-dark);
+  }
+
+  .theme-accent {
+    --color-fg: var(--color-fg-inverse);
+    --color-fg-muted: var(--color-fg-inverse-soft);
+    --color-surface-default: var(--color-surface-dark);
+    --color-surface-raised-default: var(--color-surface-raised-dark);
+    --color-edge: var(--color-edge-dark);
+    --color-icon-default: var(--color-accent-secondary);
+    --color-link-hover: var(--color-accent-secondary);
+    --rich-text-quote-bg-default: var(--rich-text-quote-bg-dark);
+    --rich-text-inline-code-bg-default: var(--rich-text-inline-code-bg-dark);
+    --gradient-cta-default: var(--gradient-cta-dark);
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  background: var(--color-surface-default);
+  color: var(--color-fg);
+  font-family: var(--font-family-base);
+  font-size: var(--text-size-body);
+  line-height: var(--leading-body);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+img,
+svg {
+  display: block;
+}
+
+:focus-visible {
+  outline: calc(var(--spacing) * 0.75) solid var(--color-focus);
+  outline-offset: calc(var(--spacing) * 1);
+}
+
+@layer base {
+  h1, h2, h3, h4, h5, h6 {
+    margin-block: 0;
+    font-family: var(--font-family-heading);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--leading-heading);
+  }
+
+  h1 {
+    font-size: var(--text-size-h1-mobile);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--leading-tight);
+  }
+
+  h2 { font-size: var(--text-size-h2-mobile); }
+  h3 { font-size: var(--text-size-h3); }
+  h4 { font-size: var(--text-size-body-large); }
+  h5 { font-size: var(--text-size-body); }
+  h6 { font-size: var(--text-size-body-small); }
+
+  @media (min-width: 768px) {
+    h1 { font-size: var(--text-size-h1); }
+    h2 { font-size: var(--text-size-h2); }
+  }
+
+  p, ul, ol, blockquote, pre {
+    margin-block: 0;
+  }
+
+  ul { list-style: disc; padding-left: 1.4em; }
+  ol { list-style: decimal; padding-left: 1.4em; }
+}
+
+.bm-rich-text-section {
+  background: var(--color-surface-default);
+  padding: var(--spacing-section-y) var(--spacing-container);
+}
+
+.bm-rich-text-section--quiet {
+  background: var(--color-surface-muted);
+}
+
+.bm-rich-text {
+  max-width: var(--max-width-rich-text);
+  margin-inline: auto;
+  color: var(--color-fg);
+}
+
+.bm-rich-text--wide {
+  max-width: var(--max-width-rich-text-wide);
+}
+
+.bm-rich-text__eyebrow {
+  margin: 0 0 calc(var(--spacing) * 4);
+  color: var(--color-accent-primary);
+  font-size: var(--text-size-eyebrow);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: var(--letter-spacing-label);
+  text-transform: uppercase;
+}
+
+.bm-rich-text__heading {
+  margin: 0;
+  color: var(--color-fg);
+  font-family: var(--font-family-heading);
+  font-size: var(--text-size-h2-mobile);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--leading-heading);
+}
+
+.bm-rich-text__body {
+  margin-top: var(--rich-text-heading-space);
+  color: var(--color-fg);
+  font-size: var(--text-size-body-large);
+  line-height: var(--leading-relaxed);
+}
+
+.bm-rich-text__body--inline {
+  margin-top: 0;
+}
+
+.bm-rich-text__body > * {
+  margin-block: 0;
+}
+
+.bm-rich-text__body > * + * {
+  margin-top: var(--rich-text-flow-space);
+}
+
+.bm-rich-text__body h2,
+.bm-rich-text__body h3,
+.bm-rich-text__body h4 {
+  color: var(--color-fg);
+  font-family: var(--font-family-heading);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--leading-heading);
+}
+
+.bm-rich-text__body h2 {
+  font-size: var(--text-size-h3);
+}
+
+.bm-rich-text__body h3,
+.bm-rich-text__body h4 {
+  font-size: var(--text-size-body-large);
+}
+
+.bm-rich-text__body a {
+  color: var(--color-link-hover);
+  font-weight: var(--font-weight-semibold);
+  text-decoration: underline;
+  text-decoration-thickness: var(--rich-text-link-decoration-thickness);
+  text-underline-offset: var(--rich-text-link-underline-offset);
+}
+
+.bm-rich-text__body ul {
+  list-style: disc;
+  padding-left: var(--rich-text-list-indent);
+}
+
+.bm-rich-text__body ol {
+  list-style: decimal;
+  padding-left: var(--rich-text-list-indent);
+}
+
+.bm-rich-text__body li + li {
+  margin-top: calc(var(--spacing) * 3);
+}
+
+.bm-rich-text__body blockquote {
+  border-left: var(--rich-text-blockquote-border-width) solid var(--rich-text-quote-border);
+  background: var(--rich-text-quote-bg-default);
+  padding: calc(var(--spacing) * 5) calc(var(--spacing) * 6);
+  font-weight: var(--font-weight-medium);
+}
+
+.bm-rich-text__body code {
+  border-radius: calc(var(--spacing) * 1);
+  background: var(--rich-text-inline-code-bg-default);
+  color: var(--rich-text-inline-code-text);
+  font-size: var(--text-size-caption);
+  padding: var(--rich-text-inline-code-padding);
+}
+
+@media (min-width: 768px) {
+  .bm-rich-text__heading {
+    font-size: var(--text-size-h2);
+  }
+}

package/templates/astro/template/src/design-system/tokens/colors.css

@@ -0,0 +1,60 @@
+@theme {
+  --color-black: #000000;
+  --color-white: #ffffff;
+  --color-page: var(--color-white);
+  --color-page-dark: #101014;
+  --color-page-inverse: #000000;
+  --color-chrome-surface: var(--color-page-inverse);
+  --color-chrome-surface-default: var(--color-chrome-surface);
+  --color-surface: #ffffff;
+  --color-surface-muted: #f6f6f7;
+  --color-surface-raised: #ffffff;
+  --color-surface-dark: #101014;
+  --color-surface-raised-dark: #16161d;
+  --color-fg-primary: #050505;
+  --color-fg-secondary: #4b4b50;
+  --color-fg-base-muted: #8d8d96;
+  --color-fg-inverse: #f7f7f7;
+  --color-fg-inverse-soft: #c8c8ce;
+  --color-fg-inverse-muted: #8f8f96;
+  --color-border: color-mix(in srgb, var(--color-black) 12%, transparent);
+  --color-edge-dark: color-mix(in srgb, var(--color-white) 16%, transparent);
+  --color-edge-inverse: color-mix(in srgb, var(--color-white) 26%, transparent);
+  --color-focus: #9a78ff;
+  --color-fg: var(--color-fg-primary);
+  --color-fg-muted: var(--color-fg-secondary);
+  --color-surface-default: var(--color-page);
+  --color-surface-raised-default: var(--color-surface-raised);
+  --color-edge: var(--color-border);
+  --color-accent-primary: #8b72ff;
+  --color-accent-secondary: #c9a7ff;
+  --color-accent-tertiary: #f0b2a6;
+  --color-accent-pink: #f0d9ee;
+  --color-accent-blue: #8ea2ff;
+  --color-accent-warm: #f0b2a6;
+  --color-icon-default: var(--color-accent-primary);
+  --color-link-hover: var(--color-accent-primary);
+  --color-brand-900: #241f54;
+  --color-brand-700: #5e45b8;
+  --color-brand-400: #8b72ff;
+  --color-brand-350: #a476ff;
+  --color-brand-300: #a98aff;
+  --color-brand-200: #c9a7ff;
+  --color-brand-100: #d5b7ff;
+  --gradient-hero-overlay: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--color-black) 68%, transparent),
+    color-mix(in srgb, var(--color-black) 50%, transparent) 48%,
+    color-mix(in srgb, var(--color-black) 12%, transparent)
+  );
+  --gradient-hero-overlay-rtl: linear-gradient(
+    270deg,
+    color-mix(in srgb, var(--color-black) 68%, transparent),
+    color-mix(in srgb, var(--color-black) 50%, transparent) 48%,
+    color-mix(in srgb, var(--color-black) 12%, transparent)
+  );
+  --gradient-cta: linear-gradient(135deg, var(--color-brand-400) 0%, var(--color-brand-100) 48%, var(--color-brand-350) 100%);
+  --gradient-cta-dark: linear-gradient(135deg, var(--color-brand-900) 0%, var(--color-brand-700) 52%, #14141f 100%);
+  --gradient-cta-default: var(--gradient-cta);
+  --gradient-top-rail: linear-gradient(90deg, var(--color-brand-300) 0%, var(--color-accent-pink) 52%, var(--color-accent-blue) 100%);
+}