/* 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: #f8fafc; --md-surface: #f8fafc; --md-surface-bright: #ffffff; --md-surface-dim: #dee3eb; --md-surface-tint: #4a5d71; --md-surface-variant: #dee3eb; --md-surface-container-lowest: #ffffff; --md-surface-container-low: #f1f4f9; --md-surface-container: #f1f3f4; --md-surface-container-high: #ebeef4; --md-surface-container-highest: #e1e2e9; --md-primary: #4a5d71; --md-primary-container: #d7e2ff; --md-primary-fixed: #d7e2ff; --md-primary-fixed-dim: #bbc6e2; --md-on-primary: #ffffff; --md-on-primary-container: #111d2e; --md-on-primary-fixed: #001d36; --md-on-primary-fixed-variant: #3c475d; --md-secondary: #4a5d71; --md-secondary-container: #d3e4ff; --md-secondary-fixed: #d1e4ff; --md-secondary-fixed-dim: #afc9ea; --md-on-secondary: #ffffff; --md-on-secondary-container: #001d36; --md-on-secondary-fixed: #001d36; --md-on-secondary-fixed-variant: #2f4865; --md-tertiary: #705d3f; --md-tertiary-container: #fbe1bb; --md-tertiary-fixed: #fcdeb3; --md-tertiary-fixed-dim: #dfc299; --md-on-tertiary: #ffffff; --md-on-tertiary-container: #271901; --md-on-tertiary-fixed: #271901; --md-on-tertiary-fixed-variant: #574423; --md-error: #ba1a1a; --md-error-container: #ffdad6; --md-on-error: #ffffff; --md-on-error-container: #410002; --md-on-background: #191c1e; --md-on-surface: #191c1e; --md-on-surface-variant: #43474e; --md-outline: #73777f; --md-outline-variant: #c3c7cf; --md-inverse-primary: #bbc6e2; --md-inverse-surface: #2e3133; --md-inverse-on-surface: #f0f0f3; --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: #061423; --md-surface: #061423; --md-surface-bright: #2d3a4a; --md-surface-dim: #061423; --md-surface-tint: #bbc6e2; --md-surface-variant: #283646; --md-surface-container-lowest: #020f1e; --md-surface-container-low: #0f1c2c; --md-surface-container: #132030; --md-surface-container-high: #1e2b3b; --md-surface-container-highest: #283646; --md-primary: #bbc6e2; --md-primary-container: #1b263b; --md-primary-fixed: #d7e2ff; --md-primary-fixed-dim: #bbc6e2; --md-on-primary: #263046; --md-on-primary-container: #828da7; --md-on-primary-fixed: #101b30; --md-on-primary-fixed-variant: #3c475d; --md-secondary: #afc9ea; --md-secondary-container: #2f4865; --md-secondary-fixed: #d1e4ff; --md-secondary-fixed-dim: #afc9ea; --md-on-secondary: #17324d; --md-on-secondary-container: #9eb7d8; --md-on-secondary-fixed: #001d36; --md-on-secondary-fixed-variant: #2f4865; --md-tertiary: #dfc299; --md-tertiary-container: #332306; --md-tertiary-fixed: #fcdeb3; --md-tertiary-fixed-dim: #dfc299; --md-on-tertiary: #3f2d0f; --md-on-tertiary-container: #a28963; --md-on-tertiary-fixed: #271901; --md-on-tertiary-fixed-variant: #574423; --md-error: #ffb4ab; --md-error-container: #93000a; --md-on-error: #690005; --md-on-error-container: #ffdad6; --md-on-background: #d6e4f9; --md-on-surface: #d6e4f9; --md-on-surface-variant: #c5c6cd; --md-outline: #8f9097; --md-outline-variant: #45474d; --md-inverse-primary: #545e76; --md-inverse-surface: #d6e4f9; --md-inverse-on-surface: #243141; --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: var(--md-background); color: 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: 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(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: var(--md-primary); border-bottom-width: 2px; } /* === Scrollbar === */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--md-scrollbar-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: 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: var(--md-surface-container-low); } .tree-header-sub { padding-left: 2.5rem; } .tree-chevron { transition: transform 0.2s; } .tree-icon { color: 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: var(--md-surface-container-low); } .tree-product.sub { padding-left: 5rem; } .tree-product-name { color: var(--md-on-surface); } .tree-product-price { color: var(--md-on-surface-variant); font-size: 0.8125rem; font-variant-numeric: tabular-nums; } .tree-action { color: 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: var(--md-primary); background: var(--md-surface-container-highest); } .tree-empty { padding: 0.75rem 1.25rem 0.75rem 3.5rem; color: var(--md-on-surface-variant); font-size: 0.8125rem; font-style: italic; } .tree-empty.sub { padding-left: 5rem; } /* === Selection === */ ::selection { background: var(--md-primary); color: var(--md-on-primary); }