Initial commit

app/assets/styles/_base.scss

@@ -0,0 +1,112 @@
+html {
+  font-family: var(--font-family-base);
+  background: var(--ui-bg);
+  color: var(--ui-text);
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background:
+    var(--page-accent),
+    linear-gradient(180deg, var(--ui-bg), var(--ui-bg-muted));
+  color: var(--ui-text);
+}
+
+a {
+  color: inherit;
+}
+
+button,
+input,
+select {
+  font: inherit;
+}
+
+h1,
+h2,
+p {
+  margin: 0;
+}
+
+.shell {
+  width: min(calc(100% - 2rem), var(--page-max-width));
+  margin: 0 auto;
+  padding: 1.5rem 0 3rem;
+}
+
+.shell__header {
+  display: flex;
+  justify-content: space-between;
+  gap: 1.5rem;
+  align-items: flex-start;
+  margin-bottom: 2rem;
+}
+
+.shell__brand,
+.stack {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.shell__badge,
+.shell__eyebrow,
+.section-kicker {
+  width: fit-content;
+}
+
+.shell__eyebrow,
+.section-kicker {
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-size: 0.75rem;
+  color: var(--ui-text-muted);
+}
+
+.shell__title {
+  font-size: clamp(2rem, 4vw, 3.2rem);
+  line-height: 1;
+}
+
+.shell__subtitle {
+  max-width: 54rem;
+  color: var(--ui-text-muted);
+}
+
+.shell__actions {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.shell__select {
+  min-width: 10rem;
+}
+
+.page-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.25rem;
+}
+
+.hero-actions,
+.component-showcase {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 900px) {
+  .shell__header {
+    flex-direction: column;
+  }
+
+  .shell__actions {
+    justify-content: flex-start;
+  }
+
+  .page-grid {
+    grid-template-columns: 1fr;
+  }
+}

app/assets/styles/_theme.scss

@@ -0,0 +1,16 @@
+:root,
+.light {
+  --page-accent: radial-gradient(
+    circle at top right,
+    color-mix(in srgb, var(--ui-primary) 18%, transparent),
+    transparent 34%
+  );
+}
+
+.dark {
+  --page-accent: radial-gradient(
+    circle at top right,
+    color-mix(in srgb, var(--ui-primary) 22%, transparent),
+    transparent 32%
+  );
+}

app/assets/styles/_tokens.scss

@@ -0,0 +1,7 @@
+:root {
+  --font-family-base: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+  --page-max-width: 1200px;
+  --ui-radius: 0.75rem;
+  --shadow-soft: 0 20px 45px rgba(15, 23, 42, 0.12);
+  --transition-base: 180ms ease;
+}

app/assets/styles/main.scss

@@ -0,0 +1,3 @@
+@use './tokens';
+@use './theme';
+@use './base';

app/assets/styles/ui.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "@nuxt/ui";