/* ── shoe-erp design tokens ───────────────────────────────────────────────── Palette: "slate paper" neutrals, cobalt primary, leather-tan accent. Every component derives from these variables — no page defines its own colors. Dark theme flips via [data-theme="dark"] on (JS toggle), falling back to prefers-color-scheme. */ :root { /* Surfaces & ink */ --bg: #f6f6f4; --surface: #ffffff; --surface-raised: #ffffff; --surface-sunken: #efefec; --ink: #1b1e23; --ink-secondary: #5a616c; --ink-faint: #8b919b; --border: #e2e2de; --border-strong: #c9c9c4; /* Brand */ --primary: #3b4fd8; --primary-hover: #3243bb; --primary-ink: #ffffff; --primary-tint: #eceffc; --accent: #a9713b; /* leather */ --accent-tint: #f6ede2; /* Semantic */ --success: #2e7d4f; --success-tint: #e7f3ec; --warning: #a66a00; --warning-tint: #faf1de; --danger: #c13a3a; --danger-tint: #fae9e9; --info: #2c6e91; --info-tint: #e6f1f7; /* Type */ --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --text-xs: 0.75rem; /* 12 — micro labels, table meta */ --text-sm: 0.8125rem; /* 13 — table body, secondary */ --text-base: 0.875rem; /* 14 — UI default */ --text-md: 1rem; /* 16 — emphasized */ --text-lg: 1.25rem; /* 20 — page titles */ --text-xl: 1.625rem; /* 26 — big numbers */ --tracking-caps: 0.07em; /* Space (8px scale with 4px half-step) */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; /* Shape & elevation */ --radius-sm: 5px; --radius: 8px; --radius-lg: 12px; --shadow-pop: 0 4px 16px rgba(20, 22, 28, 0.10), 0 1px 3px rgba(20, 22, 28, 0.08); --shadow-modal: 0 16px 48px rgba(20, 22, 28, 0.18); /* Shell */ --sidebar-w: 236px; --topbar-h: 52px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #15171b; --surface: #1d2026; --surface-raised: #23262d; --surface-sunken: #101216; --ink: #e7e9ec; --ink-secondary: #9aa1ab; --ink-faint: #6b727d; --border: #2b2f37; --border-strong: #3b404a; --primary: #8291ff; --primary-hover: #98a5ff; --primary-ink: #12142b; --primary-tint: #23273d; --accent: #c79a63; --accent-tint: #2e2620; --success: #57b380; --success-tint: #1c2b23; --warning: #d29a3a; --warning-tint: #2d2617; --danger: #e06c6c; --danger-tint: #321c1c; --info: #6aa9c9; --info-tint: #1a262d; --shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.55); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #15171b; --surface: #1d2026; --surface-raised: #23262d; --surface-sunken: #101216; --ink: #e7e9ec; --ink-secondary: #9aa1ab; --ink-faint: #6b727d; --border: #2b2f37; --border-strong: #3b404a; --primary: #8291ff; --primary-hover: #98a5ff; --primary-ink: #12142b; --primary-tint: #23273d; --accent: #c79a63; --accent-tint: #2e2620; --success: #57b380; --success-tint: #1c2b23; --warning: #d29a3a; --warning-tint: #2d2617; --danger: #e06c6c; --danger-tint: #321c1c; --info: #6aa9c9; --info-tint: #1a262d; --shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.55); color-scheme: dark; }