init app

app/globals.css

@@ -1,26 +1,102 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  /* Core tokens */
+  --bg: #ffffff;
+  --surface: #f8f9fa;
+  --fg: #1a1a2e;
+  --muted: #6b7280;
+  --meta: #9ca3af;
+  --border: #d1d5db;
+
+  /* Accent — Duolingo green */
+  --accent: #58cc02;
+  --accent-on: #ffffff;
+  --accent-hover: #46a302;
+  --accent-active: #3a8a01;
+
+  /* Status */
+  --success: #00c853;
+  --warn: #ff9800;
+  --danger: #ff4444;
+
+  /* Shadows */
+  --shadow-chunky: 0 4px 0 0 var(--accent-active);
+  --shadow-card: 0 2px 0 0 rgba(0, 0, 0, 0.08);
 }
 
 @theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+  --color-bg: var(--bg);
+  --color-surface: var(--surface);
+  --color-fg: var(--fg);
+  --color-muted: var(--muted);
+  --color-meta: var(--meta);
+  --color-border: var(--border);
+  --color-accent: var(--accent);
+  --color-accent-on: var(--accent-on);
+  --color-accent-hover: var(--accent-hover);
+  --color-accent-active: var(--accent-active);
+  --color-success: var(--success);
+  --color-warn: var(--warn);
+  --color-danger: var(--danger);
+  --font-display: "Feather Bold", "DIN Round Pro", "Helvetica Neue", sans-serif;
+  --font-body: "Mona Sans", "Helvetica Neue", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
 }
 
 body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: var(--font-body);
+}
+
+/* Button press-down animation */
+.btn-press:active {
+  transform: translateY(2px);
+  box-shadow: none !important;
+}
+
+/* Smooth transitions for interactive elements */
+input, select, textarea, button {
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+/* Customer color palette for item grouping */
+.customer-color-0 { --customer-border: #3b82f6; --customer-bg: #eff6ff; --customer-chip: #dbeafe; --customer-chip-text: #1e40af; }
+.customer-color-1 { --customer-border: #10b981; --customer-bg: #ecfdf5; --customer-chip: #d1fae5; --customer-chip-text: #065f46; }
+.customer-color-2 { --customer-border: #8b5cf6; --customer-bg: #f5f3ff; --customer-chip: #ede9fe; --customer-chip-text: #5b21b6; }
+.customer-color-3 { --customer-border: #f97316; --customer-bg: #fff7ed; --customer-chip: #ffedd5; --customer-chip-text: #9a3412; }
+.customer-color-4 { --customer-border: #14b8a6; --customer-bg: #f0fdfa; --customer-chip: #ccfbf1; --customer-chip-text: #115e59; }
+.customer-color-5 { --customer-border: #ec4899; --customer-bg: #fdf2f8; --customer-chip: #fce7f3; --customer-chip-text: #9d174d; }
+
+/* Customer color presets */
+.customer-color-0 {
+  --customer-border: #3b82f6;
+  --customer-bg: #eff6ff;
+  --customer-text: #1e40af;
+}
+.customer-color-1 {
+  --customer-border: #10b981;
+  --customer-bg: #ecfdf5;
+  --customer-text: #065f46;
+}
+.customer-color-2 {
+  --customer-border: #8b5cf6;
+  --customer-bg: #f5f3ff;
+  --customer-text: #5b21b6;
+}
+.customer-color-3 {
+  --customer-border: #f97316;
+  --customer-bg: #fff7ed;
+  --customer-text: #9a3412;
+}
+.customer-color-4 {
+  --customer-border: #14b8a6;
+  --customer-bg: #f0fdfa;
+  --customer-text: #0f766e;
+}
+.customer-color-5 {
+  --customer-border: #ec4899;
+  --customer-bg: #fdf2f8;
+  --customer-text: #9d174d;
 }