/* Pood — Design System: "The Digital Foreman" * Material Design 3 color tokens, tonal layering, industrial precision. * Light mode = default (:root), dark mode = .dark class on . */ /* === Light theme tokens (base) === */ :root { --md-background: 248 250 252; --md-surface: 248 250 252; --md-surface-bright: 255 255 255; --md-surface-dim: 222 227 235; --md-surface-tint: 74 93 113; --md-surface-variant: 222 227 235; --md-surface-container-lowest: 255 255 255; --md-surface-container-low: 241 244 249; --md-surface-container: 241 243 244; --md-surface-container-high: 235 238 244; --md-surface-container-highest: 225 226 233; --md-primary: 74 93 113; --md-primary-container: 215 226 255; --md-primary-fixed: 215 226 255; --md-primary-fixed-dim: 187 198 226; --md-on-primary: 255 255 255; --md-on-primary-container: 17 29 46; --md-on-primary-fixed: 0 29 54; --md-on-primary-fixed-variant: 60 71 93; --md-secondary: 74 93 113; --md-secondary-container: 211 228 255; --md-secondary-fixed: 209 228 255; --md-secondary-fixed-dim: 175 201 234; --md-on-secondary: 255 255 255; --md-on-secondary-container: 0 29 54; --md-on-secondary-fixed: 0 29 54; --md-on-secondary-fixed-variant: 47 72 101; --md-tertiary: 112 93 63; --md-tertiary-container: 251 225 187; --md-tertiary-fixed: 252 222 179; --md-tertiary-fixed-dim: 223 194 153; --md-on-tertiary: 255 255 255; --md-on-tertiary-container: 39 25 1; --md-on-tertiary-fixed: 39 25 1; --md-on-tertiary-fixed-variant: 87 68 35; --md-error: 186 26 26; --md-error-container: 255 218 214; --md-on-error: 255 255 255; --md-on-error-container: 65 0 2; --md-on-background: 25 28 30; --md-on-surface: 25 28 30; --md-on-surface-variant: 67 71 78; --md-outline: 115 119 127; --md-outline-variant: 195 199 207; --md-inverse-primary: 187 198 226; --md-inverse-surface: 46 49 51; --md-inverse-on-surface: 240 240 243; --md-scrollbar-thumb: rgba(0, 0, 0, 0.12); --md-scrollbar-hover: rgba(0, 0, 0, 0.2); } /* === Dark theme tokens (override) === */ .dark { --md-background: 6 20 35; --md-surface: 6 20 35; --md-surface-bright: 45 58 74; --md-surface-dim: 6 20 35; --md-surface-tint: 187 198 226; --md-surface-variant: 40 54 70; --md-surface-container-lowest: 2 15 30; --md-surface-container-low: 15 28 44; --md-surface-container: 19 32 48; --md-surface-container-high: 30 43 59; --md-surface-container-highest: 40 54 70; --md-primary: 187 198 226; --md-primary-container: 27 38 59; --md-primary-fixed: 215 226 255; --md-primary-fixed-dim: 187 198 226; --md-on-primary: 38 48 70; --md-on-primary-container: 130 141 167; --md-on-primary-fixed: 16 27 48; --md-on-primary-fixed-variant: 60 71 93; --md-secondary: 175 201 234; --md-secondary-container: 47 72 101; --md-secondary-fixed: 209 228 255; --md-secondary-fixed-dim: 175 201 234; --md-on-secondary: 23 50 77; --md-on-secondary-container: 158 183 216; --md-on-secondary-fixed: 0 29 54; --md-on-secondary-fixed-variant: 47 72 101; --md-tertiary: 223 194 153; --md-tertiary-container: 51 35 6; --md-tertiary-fixed: 252 222 179; --md-tertiary-fixed-dim: 223 194 153; --md-on-tertiary: 63 45 15; --md-on-tertiary-container: 162 137 99; --md-on-tertiary-fixed: 39 25 1; --md-on-tertiary-fixed-variant: 87 68 35; --md-error: 255 180 171; --md-error-container: 147 0 10; --md-on-error: 105 0 5; --md-on-error-container: 255 218 214; --md-on-background: 214 228 249; --md-on-surface: 214 228 249; --md-on-surface-variant: 197 198 205; --md-outline: 143 144 151; --md-outline-variant: 69 71 77; --md-inverse-primary: 84 94 118; --md-inverse-surface: 214 228 249; --md-inverse-on-surface: 36 49 65; --md-scrollbar-thumb: rgba(255, 255, 255, 0.1); --md-scrollbar-hover: rgba(255, 255, 255, 0.18); } /* === Base Styles === */ html { font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background-color: rgb(var(--md-background)); color: rgb(var(--md-on-surface)); } /* === Material Symbols === */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; font-size: 20px; vertical-align: middle; line-height: 1; } .icon-sm { font-size: 16px; } .icon-lg { font-size: 28px; } .icon-xl { font-size: 36px; } .material-symbols-outlined.filled { font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24; } /* === Ghost Shadows === */ .shadow-ghost { box-shadow: 0px 12px 32px rgba(0, 0, 0, 0.2); } .shadow-ghost-sm { box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12); } /* === Glass Panel (frosted overlay) === */ .glass-panel { background: rgb(var(--md-surface-bright)); opacity: 0.7; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } /* === Precision Grid Background (for empty states) === */ .precision-grid { background-image: radial-gradient(rgb(var(--md-outline-variant)) 1px, transparent 1px); background-size: 24px 24px; opacity: 0.05; } /* === Form Inputs: bottom-only focus line === */ input:focus, select:focus, textarea:focus { outline: none; box-shadow: none; border-color: transparent; border-bottom-color: rgb(var(--md-primary)); border-bottom-width: 2px; } /* === Scrollbar === */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgb(var(--md-scrollbar-thumb)); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgb(var(--md-scrollbar-hover)); } /* === Animations === */ @keyframes spin { to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } @keyframes fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fade-in 0.2s ease-out; } /* === Print === */ @media print { .no-print { display: none !important; } } /* === Status stripe for kanban cards === */ .status-stripe { border-left-width: 4px; border-left-style: solid; } /* === Tabular numbers for data === */ .tabular-nums { font-variant-numeric: tabular-nums; } /* === Product Tree === */ .product-tree { font-size: 0.875rem; } .tree-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; cursor: pointer; transition: background 0.15s; } .tree-header:hover { background: rgb(var(--md-surface-container-low)); } .tree-header-sub { padding-left: 2.5rem; } .tree-chevron { transition: transform 0.2s; } .tree-icon { color: rgb(var(--md-on-surface-variant)); } .tree-icon.sub { font-size: 18px; } .tree-name { font-weight: 600; } .tree-name.sub { font-weight: 500; font-size: 0.8125rem; } .tree-children { /* no border — tonal layering */ } .tree-product { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1.25rem 0.5rem 3.5rem; transition: background 0.15s; } .tree-product:hover { background: rgb(var(--md-surface-container-low)); } .tree-product.sub { padding-left: 5rem; } .tree-product-name { color: rgb(var(--md-on-surface)); } .tree-product-price { color: rgb(var(--md-on-surface-variant)); font-size: 0.8125rem; font-variant-numeric: tabular-nums; } .tree-action { color: rgb(var(--md-on-surface-variant)); opacity: 0; transition: opacity 0.15s; padding: 0.25rem; border-radius: 0.375rem; } .tree-header:hover .tree-action, .tree-product:hover .tree-action { opacity: 1; } .tree-action:hover { color: rgb(var(--md-primary)); background: rgb(var(--md-surface-container-highest)); } .tree-empty { padding: 0.75rem 1.25rem 0.75rem 3.5rem; color: rgb(var(--md-on-surface-variant)); font-size: 0.8125rem; font-style: italic; } .tree-empty.sub { padding-left: 5rem; } /* === Selection === */ ::selection { background: rgb(var(--md-primary)); color: rgb(var(--md-on-primary)); }