init

src/styles/_animations.scss

@@ -0,0 +1,71 @@
+// Keyframes and animation utilities
+@use 'variables' as *;
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes fade-up {
+  from { opacity: 0; transform: translateY(12px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fade-down {
+  from { opacity: 0; transform: translateY(-12px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slide-in-right {
+  from { opacity: 0; transform: translateX(24px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes slide-in-left {
+  from { opacity: 0; transform: translateX(-24px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes scale-in {
+  from { opacity: 0; transform: scale(0.94); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+@keyframes shimmer {
+  0%   { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+@keyframes pulse-signal {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.5; }
+}
+
+// Utility classes
+.animate-fade-in  { animation: fade-in  var(--transition-base) both; }
+.animate-fade-up  { animation: fade-up  var(--transition-base) both; }
+.animate-scale-in { animation: scale-in var(--transition-spring) both; }
+
+// Skeleton shimmer
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--color-surface-2) 25%,
+    var(--color-surface-3) 50%,
+    var(--color-surface-2) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: var(--radius-sm);
+}
+
+// Reduced motion — disable all animations
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

src/styles/_typography.scss

@@ -0,0 +1,95 @@
+// Typography scale and global text rules
+@use 'variables' as *;
+
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  font-family: var(--font-mono);
+  font-size: 0.875rem; // 14px base
+  line-height: 1.6;
+  color: var(--color-cream);
+  background-color: var(--color-base);
+}
+
+// Display heading — Instrument Serif
+.display {
+  font-family: var(--font-display);
+  font-weight: 400;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+
+h1, .h1 {
+  font-family: var(--font-display);
+  font-size: 2.5rem;
+  font-weight: 400;
+  line-height: 1.1;
+  letter-spacing: -0.03em;
+  text-wrap: balance;
+  color: var(--color-cream);
+}
+
+h2, .h2 {
+  font-family: var(--font-display);
+  font-size: 1.75rem;
+  font-weight: 400;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+  text-wrap: balance;
+  color: var(--color-cream);
+}
+
+h3, .h3 {
+  font-family: var(--font-mono);
+  font-size: 1.125rem;
+  font-weight: 500;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  color: var(--color-cream);
+}
+
+// DM Mono UI labels
+.label {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--color-muted);
+}
+
+.meta {
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 400;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--color-muted);
+}
+
+p {
+  line-height: 1.65;
+  max-width: 65ch;
+  text-wrap: pretty;
+}
+
+a {
+  color: var(--color-cream);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+
+  &:hover {
+    color: var(--color-signal);
+  }
+}
+
+// Responsive heading scale
+@include mobile {
+  h1, .h1 { font-size: 2rem; }
+  h2, .h2 { font-size: 1.5rem; }
+}

src/styles/_variables.scss

@@ -0,0 +1,73 @@
+// Design tokens — do not use directly in components; use CSS custom properties
+:root {
+  // Surfaces
+  --color-base:      #0d0d0d;
+  --color-surface:   #161614;
+  --color-surface-2: #1e1e1b;
+  --color-surface-3: #242420;
+
+  // Text
+  --color-cream:     #f0ebe0;
+  --color-muted:     #6b6860;
+  --color-dim:       #3a3935;
+
+  // Brand signal
+  --color-signal:    #c45c3a;
+  --color-signal-dim:#7a3822;
+  --color-signal-bg: rgba(196, 92, 58, 0.12);
+
+  // Utility
+  --color-border:    rgba(240, 235, 224, 0.08);
+  --color-border-strong: rgba(240, 235, 224, 0.16);
+  --color-overlay:   rgba(13, 13, 13, 0.72);
+
+  // Typography
+  --font-display: 'Instrument Serif', Georgia, serif;
+  --font-mono:    'DM Mono', 'Courier New', monospace;
+
+  // Border radius
+  --radius-xs:  2px;
+  --radius-sm:  4px;
+  --radius-md:  8px;
+  --radius-lg:  16px;
+  --radius-xl:  24px;
+  --radius-full: 9999px;
+
+  // Shadows
+  --shadow-card:   0 2px 24px rgba(0, 0, 0, 0.6);
+  --shadow-modal:  0 8px 64px rgba(0, 0, 0, 0.8);
+  --shadow-signal: 0 0 20px rgba(196, 92, 58, 0.3);
+
+  // Transitions
+  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-base:   280ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-spring: 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  --transition-slow:   600ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  // Z-index scale
+  --z-base:       1;
+  --z-dropdown:   100;
+  --z-sticky:     200;
+  --z-overlay:    300;
+  --z-modal:      400;
+  --z-toast:      500;
+  --z-tooltip:    600;
+  --z-titlebar:   700;
+
+  // Layout
+  --sidebar-collapsed: 64px;
+  --sidebar-expanded:  240px;
+  --nav-height:        60px;
+  --titlebar-height:   36px;
+}
+
+// SCSS breakpoints (for use in @media)
+$mobile:  375px;
+$tablet:  768px;
+$desktop: 1024px;
+$wide:    1440px;
+
+@mixin mobile { @media (max-width: #{$tablet - 1px}) { @content; } }
+@mixin tablet { @media (min-width: $tablet) { @content; } }
+@mixin desktop { @media (min-width: $desktop) { @content; } }
+@mixin wide { @media (min-width: $wide) { @content; } }

src/styles/main.scss

@@ -0,0 +1,81 @@
+// Import order: variables → typography → animations
+@use 'variables' as *;
+@use 'typography';
+@use 'animations';
+
+// ─── Global reset additions ──────────────────────────────────────────────────
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow: hidden; // Tauri + app shell handle scroll internally
+}
+
+#app {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+// ─── Scrollbar styling ───────────────────────────────────────────────────────
+
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-dim);
+  border-radius: var(--radius-full);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-muted);
+}
+
+// ─── Selection ───────────────────────────────────────────────────────────────
+
+::selection {
+  background: var(--color-signal);
+  color: var(--color-cream);
+}
+
+// ─── Focus visible ───────────────────────────────────────────────────────────
+
+:focus-visible {
+  outline: 2px solid var(--color-signal);
+  outline-offset: 2px;
+  border-radius: var(--radius-xs);
+}
+
+// ─── Utility ─────────────────────────────────────────────────────────────────
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

src/styles/tailwind.css

@@ -0,0 +1 @@
+@import "tailwindcss";