103 lines
3.0 KiB
CSS
103 lines
3.0 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
/* 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-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(--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;
|
|
}
|