initial scaffold

src/theme/colors.ts

@@ -0,0 +1,34 @@
+/**
+ * Astra color tokens — ported from desktop `src/renderer/styles/globals.css`.
+ * Dark-only on mobile (the desktop app is dark-only too).
+ */
+export const colors = {
+  // Base backgrounds
+  bgPrimary: '#000000',
+  bgSecondary: '#050505',
+  bgTertiary: '#0a0a0a',
+
+  // Glass / surface overlays (white alphas)
+  glassBg: 'rgba(255, 255, 255, 0.03)',
+  glassBorder: 'rgba(255, 255, 255, 0.08)',
+  glassHighlight: 'rgba(255, 255, 255, 0.05)',
+
+  // Text (white alphas)
+  textPrimary: 'rgba(255, 255, 255, 0.95)',
+  textSecondary: 'rgba(255, 255, 255, 0.6)',
+  textTertiary: 'rgba(255, 255, 255, 0.4)',
+
+  // Cyan accent
+  accent: '#38bdf8',
+  accentHover: '#7dd3fc',
+  accentGlow: 'rgba(56, 189, 248, 0.3)',
+  accentText: '#bae6fd',
+  accentTextStrong: '#e0f2fe',
+
+  // Astra mark fills (hsl(198 …) from the desktop logo)
+  logoMain: '#00b3ff', // hsl(198 100% 50%)
+  logoShadow: '#152932', // hsl(198 40% 14%)
+  logoBackdrop: '#05070a',
+} as const;
+
+export type ColorToken = keyof typeof colors;

src/theme/index.ts

@@ -0,0 +1,18 @@
+import { colors } from './colors';
+import { fonts, fontSize, lineHeight } from './typography';
+import { spacing, radius, layout, durations } from './spacing';
+
+export const theme = {
+  colors,
+  fonts,
+  fontSize,
+  lineHeight,
+  spacing,
+  radius,
+  layout,
+  durations,
+} as const;
+
+export type Theme = typeof theme;
+
+export { colors, fonts, fontSize, lineHeight, spacing, radius, layout, durations };

src/theme/spacing.ts

@@ -0,0 +1,31 @@
+/**
+ * Spacing, radius, and layout tokens.
+ * Radii match desktop (`--radius-sm/md/lg`); layout dims are adapted for mobile.
+ */
+export const spacing = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  xxl: 32,
+} as const;
+
+export const radius = {
+  sm: 6,
+  md: 10,
+  lg: 16,
+  pill: 999,
+} as const;
+
+export const layout = {
+  /** Persistent mini-player bar height (desktop now-playing bar is 112px; trimmed for phone). */
+  miniPlayerHeight: 64,
+  /** Bottom tab bar content height (excludes safe-area inset, which is added on top). */
+  tabBarHeight: 56,
+} as const;
+
+export const durations = {
+  fast: 150,
+  normal: 250,
+} as const;

src/theme/typography.ts

@@ -0,0 +1,34 @@
+/**
+ * Astra typography tokens.
+ * Inter (UI) + JetBrains Mono (numerics / format badges), mirroring desktop.
+ * Family strings match the names exposed by @expo-google-fonts packages and
+ * loaded via `useFonts` in the root layout.
+ */
+export const fonts = {
+  sans: {
+    regular: 'Inter_400Regular',
+    medium: 'Inter_500Medium',
+    semibold: 'Inter_600SemiBold',
+    bold: 'Inter_700Bold',
+  },
+  mono: {
+    regular: 'JetBrainsMono_400Regular',
+    medium: 'JetBrainsMono_500Medium',
+  },
+} as const;
+
+/** Font sizes — base 14 like desktop, scaled up where mobile reading distance needs it. */
+export const fontSize = {
+  xs: 11,
+  sm: 12,
+  base: 14,
+  md: 16,
+  lg: 20,
+  xl: 26,
+  xxl: 34,
+} as const;
+
+export const lineHeight = {
+  tight: 1.2,
+  normal: 1.5,
+} as const;