/* ============================================================ POM Design Tokens — Theme definitions Default = Scher (Standard). Override with .theme-classic or .theme-kruzeniski on . ============================================================ */ /* --- Scher (Standard / Default) --- */ :root { /* Color */ --frozen: #4A7FD4; --frozen-light: rgba(74, 127, 212, 0.35); --frozen-ghost: rgba(74, 127, 212, 0.45); --bg: #FFFFFF; --surface: #FFFFFF; --baseline-bg: #F0F0F0; --text-primary: #0A0A0A; --text-secondary: #3A3A3A; --text-muted: #3A3A3A; --accent: #E8702A; --accent-muted: #C4854A; --accent-light: rgba(232, 112, 42, 0.20); --accent-surface: #FFF2E6; --delta-positive: #007A3D; --delta-positive-bg: #D1FAE5; --delta-negative: #CC0000; --delta-negative-bg: #FEE2E2; --impact-readout: #1D4ED8; --gauge-green: #007A3D; --gauge-yellow: #D97706; --gauge-red: #CC0000; --border: #BFBFBF; --border-strong: #BFBFBF; --drawer-bg: #F5F5F5; /* Typography */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Bebas Neue', 'Barlow Condensed', Impact, sans-serif; --font-condensed: 'Barlow Condensed', 'Arial Narrow', sans-serif; /* Header */ --header-height: 72px; --header-bg: #0A0A0A; --header-text: #FFFFFF; --header-border: 3px solid var(--accent); --header-brand-font: var(--font-display); --header-brand-size: 32px; --header-brand-weight: 400; --header-brand-spacing: 3px; --header-brand-transform: uppercase; --header-shadow: none; --header-ctrl-bg: transparent; --header-ctrl-border: 2px solid rgba(255, 255, 255, 0.3); --header-ctrl-text: rgba(255, 255, 255, 0.6); --header-ctrl-active-bg: rgba(232, 112, 42, 0.6); --header-ctrl-active-text: #FFFFFF; --header-ctrl-font: var(--font-condensed); --header-ctrl-radius: 4px; --header-option-bg: #222; --header-option-text: #fff; /* Shape */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-thumb: 4px; --shadow-card: none; --shadow-elevated: none; /* Layout */ --grid-left: 240px; --grid-right: 320px; --grid-max: 1440px; /* Sidebar headings */ --sidebar-heading-font: var(--font-display); --sidebar-heading-size: 22px; --sidebar-heading-weight: 400; --sidebar-heading-spacing: 4px; --sidebar-heading-transform: uppercase; --sidebar-heading-border: 3px solid var(--accent); /* Inputs */ --input-font: var(--font-condensed); --input-border: 2px solid var(--text-primary); --input-radius: 2px; --input-weight: 800; --input-label-font: var(--font-condensed); --input-label-weight: 800; --input-label-transform: uppercase; --input-label-spacing: 1.5px; /* Speedometer */ --speedo-rate-font: var(--font-display); --speedo-rate-size: 64px; --speedo-rate-weight: 400; --speedo-rate-color: var(--text-primary); --speedo-label-font: var(--font-condensed); --speedo-suffix-font: var(--font-condensed); --speedo-delta-font: var(--font-condensed); /* Levers */ --lever-height: 62px; --lever-label-font: var(--font-condensed); --lever-label-size: 16px; --lever-label-weight: 800; --lever-label-spacing: 1px; --lever-label-transform: uppercase; --lever-label-width: 140px; --lever-input-font: var(--font-condensed); --lever-input-size: 18px; --lever-input-weight: 800; --lever-input-border: 2px solid var(--text-primary); --lever-input-radius: 4px; --lever-track-height: 6px; --lever-thumb-size: 22px; --lever-thumb-radius: var(--radius-thumb); --lever-delta-font: var(--font-condensed); --lever-delta-indent: 160px; /* Financial table */ --fin-heading-font: var(--font-display); --fin-heading-size: 28px; --fin-heading-weight: 400; --fin-heading-spacing: 3px; --fin-heading-border: 4px solid var(--accent); --fin-th-font: var(--font-condensed); --fin-th-weight: 800; --fin-th-spacing: 1.5px; --fin-th-border: 4px solid var(--text-primary); --fin-last-row-border: 3px solid var(--text-primary); /* Cost dials */ --dial-card-radius: var(--radius-sm); --dial-card-padding: 18px 16px; --dial-card-gap: 14px; --dial-card-shadow: none; --dial-svg-size: 52px; --dial-svg-opacity: 0.7; --dial-center-val-display: none; --dial-name-font: var(--font-condensed); --dial-name-transform: uppercase; --dial-impact-font: var(--font-display); --dial-impact-size: 20px; --dial-label-col-display: flex; /* Footer */ --footer-border: 3px solid var(--text-primary); --footer-font: var(--font-condensed); --footer-spacing: 2px; /* Feature flags */ --kpi-strip-display: none; --freeze-btn-display: inline-flex; } /* --- Classic Theme --- */ .theme-classic { --baseline-bg: #F8F9FA; --text-primary: #111827; --text-secondary: #4B5563; --text-muted: #4B5563; --accent: #FF7700; --accent-muted: #FF7700; --accent-light: rgba(255, 119, 0, 0.3); --accent-surface: rgba(255, 119, 0, 0.1); --delta-positive: #059669; --delta-negative: #DC2626; --gauge-green: #059669; --gauge-red: #DC2626; --border: #D1D5DB; --border-strong: #D1D5DB; --drawer-bg: #F9FAFB; /* Typography — no display fonts */ --font-display: var(--font-body); --font-condensed: var(--font-body); /* Header — light */ --header-height: 64px; --header-bg: var(--bg); --header-text: var(--text-primary); --header-border: 1px solid var(--border); --header-brand-font: var(--font-body); --header-brand-size: 18px; --header-brand-weight: 800; --header-brand-spacing: 0; --header-brand-transform: none; --header-ctrl-bg: var(--bg); --header-ctrl-border: 2px solid var(--border); --header-ctrl-text: var(--text-muted); --header-ctrl-active-bg: var(--accent); --header-ctrl-active-text: #FFFFFF; --header-ctrl-font: var(--font-body); --header-ctrl-radius: 8px; --header-option-bg: #fff; --header-option-text: var(--text-primary); /* Shape */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-thumb: 50%; /* Layout */ --grid-right: 280px; --grid-max: 1440px; /* Sidebar headings */ --sidebar-heading-font: var(--font-body); --sidebar-heading-size: 14px; --sidebar-heading-weight: 800; --sidebar-heading-spacing: 0; --sidebar-heading-transform: none; --sidebar-heading-border: none; /* Inputs */ --input-font: var(--font-body); --input-border: 1px solid var(--border); --input-radius: 6px; --input-weight: 600; --input-label-font: var(--font-body); --input-label-weight: 600; --input-label-transform: none; --input-label-spacing: 0; /* Speedometer */ --speedo-rate-font: var(--font-body); --speedo-rate-size: 48px; --speedo-rate-weight: 800; --speedo-label-font: var(--font-body); --speedo-suffix-font: var(--font-body); --speedo-delta-font: var(--font-body); /* Levers */ --lever-height: 48px; --lever-label-font: var(--font-body); --lever-label-size: 14px; --lever-label-weight: 600; --lever-label-spacing: 0; --lever-label-transform: none; --lever-label-width: 130px; --lever-input-font: var(--font-body); --lever-input-size: 14px; --lever-input-weight: 600; --lever-input-border: 1px solid var(--border); --lever-input-radius: 6px; --lever-track-height: 4px; --lever-thumb-size: 18px; --lever-delta-font: var(--font-body); --lever-delta-indent: 144px; /* Financial table */ --fin-heading-font: var(--font-body); --fin-heading-size: 16px; --fin-heading-weight: 800; --fin-heading-spacing: 0; --fin-heading-border: none; --fin-th-font: var(--font-body); --fin-th-weight: 600; --fin-th-spacing: 0; --fin-th-border: 2px solid var(--border); --fin-last-row-border: 2px solid var(--text-primary); /* Cost dials */ --dial-card-radius: var(--radius-md); --dial-card-padding: 14px; --dial-card-gap: 10px; --dial-svg-size: 48px; --dial-svg-opacity: 1; --dial-center-val-display: flex; --dial-name-font: var(--font-body); --dial-name-transform: none; --dial-impact-font: var(--font-body); --dial-impact-size: 16px; --dial-label-col-display: none; /* Footer */ --footer-border: 1px solid var(--border); --footer-font: var(--font-body); --footer-spacing: 0; /* Feature flags */ --freeze-btn-display: none; } /* --- Kruzeniski Theme --- */ .theme-kruzeniski { --bg: #FFF9F5; --surface: #FFFFFF; --baseline-bg: #FFF5EE; --text-primary: #2D1B0E; --text-secondary: #5C3D2E; --text-muted: #9B7B6B; --accent: #FF6B35; --accent-muted: #FF6B35; --accent-light: rgba(255, 107, 53, 0.12); --accent-surface: #FFF3EB; --delta-positive: #2D9F6F; --delta-positive-bg: #E8F8F0; --delta-negative: #E84855; --delta-negative-bg: #FFF0F1; --impact-readout: #4A6CF7; --gauge-green: #2D9F6F; --gauge-yellow: #F5A623; --gauge-red: #E84855; --border: #F0DDD0; --border-strong: #E0C9B8; --drawer-bg: #FFF7F0; /* Typography — no display fonts */ --font-display: var(--font-body); --font-condensed: var(--font-body); /* Header — warm surface */ --header-height: 72px; --header-bg: var(--surface); --header-text: var(--text-primary); --header-border: 2px solid var(--border); --header-brand-font: var(--font-body); --header-brand-size: 22px; --header-brand-weight: 800; --header-brand-spacing: 0; --header-brand-transform: none; --header-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); --header-ctrl-bg: var(--surface); --header-ctrl-border: 2px solid var(--border); --header-ctrl-text: var(--text-muted); --header-ctrl-active-bg: var(--accent); --header-ctrl-active-text: #FFFFFF; --header-ctrl-font: var(--font-body); --header-ctrl-radius: 10px; --header-option-bg: #fff; --header-option-text: var(--text-primary); /* Shape */ --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-thumb: 50%; --shadow-card: 0 2px 8px rgba(139, 69, 19, 0.06), 0 1px 3px rgba(139, 69, 19, 0.04); --shadow-elevated: 0 8px 24px rgba(139, 69, 19, 0.08), 0 2px 8px rgba(139, 69, 19, 0.04); /* Layout */ --grid-left: 260px; --grid-right: 300px; --grid-max: 1600px; /* Sidebar headings */ --sidebar-heading-font: var(--font-body); --sidebar-heading-size: 16px; --sidebar-heading-weight: 800; --sidebar-heading-spacing: 0; --sidebar-heading-transform: none; --sidebar-heading-border: none; /* Inputs */ --input-font: var(--font-body); --input-border: 2px solid var(--border); --input-radius: 10px; --input-weight: 700; --input-label-font: var(--font-body); --input-label-weight: 700; --input-label-transform: none; --input-label-spacing: 0; /* Speedometer */ --speedo-rate-font: var(--font-body); --speedo-rate-size: 48px; --speedo-rate-weight: 800; --speedo-rate-color: var(--accent); --speedo-label-font: var(--font-body); --speedo-suffix-font: var(--font-body); --speedo-delta-font: var(--font-body); /* Levers */ --lever-height: 48px; --lever-label-font: var(--font-body); --lever-label-size: 15px; --lever-label-weight: 700; --lever-label-spacing: 0; --lever-label-transform: none; --lever-label-width: 140px; --lever-input-font: var(--font-body); --lever-input-size: 15px; --lever-input-weight: 700; --lever-input-border: 2px solid var(--border); --lever-input-radius: 10px; --lever-track-height: 10px; --lever-thumb-size: 24px; --lever-delta-font: var(--font-body); --lever-delta-indent: 156px; /* Financial table */ --fin-heading-font: var(--font-body); --fin-heading-size: 18px; --fin-heading-weight: 800; --fin-heading-spacing: 0; --fin-heading-border: none; --fin-th-font: var(--font-body); --fin-th-weight: 700; --fin-th-spacing: 0; --fin-th-border: 2px solid var(--border-strong); --fin-last-row-border: 2px solid var(--border-strong); /* Cost dials */ --dial-card-radius: var(--radius-md); --dial-card-padding: 16px; --dial-card-gap: 12px; --dial-card-shadow: var(--shadow-card); --dial-svg-size: 48px; --dial-svg-opacity: 1; --dial-center-val-display: flex; --dial-name-font: var(--font-body); --dial-name-transform: none; --dial-impact-font: var(--font-body); --dial-impact-size: 18px; --dial-label-col-display: none; /* Footer */ --footer-border: 1px solid var(--border); --footer-font: var(--font-body); --footer-spacing: 0; /* Feature flags */ --kpi-strip-display: flex; --freeze-btn-display: inline-flex; }