/* ===================================================================== HLC OS - DESIGN SYSTEM --------------------------------------------------------------------- The experience layer for HLC OS - The HLC Business Operating System. Single source of truth for the premium look & feel. Implements docs/UI_DESIGN_SYSTEM.md. Every screen inherits this token layer. 1. Theme tokens - Light (primary), Dark, System 2. Static tokens - spacing, radii, elevation, motion, type, breakpoints 3. Global refinements (focus, selection, scrollbars, reduced-motion) 4. Motion language (entrance + stagger) 5. Primitives (.ds-* buttons, chips, cards, kpi, fields, table, segmented control, toast, skeleton, empty state) 6. Legacy flagship styling (#dashboardView) - token-driven, to be reworked during the approved dashboard pass. THEME MODEL (see docs/DECISIONS.md #D1, #D6) ------------------------------------------------------------------- • Light is the DEFAULT (:root). • Dark applies via prefers-color-scheme AND [data-theme="dark"]. • Explicit choice wins: [data-theme="light"] / [data-theme="dark"] override the system preference. The theme controller (src/theme/ theme.js) sets data-theme on and persists the choice. • Dark speaks the SAME design language as light - only surface, text, and elevation tokens change; spacing, type, motion, and component anatomy are identical. ===================================================================== */ /* ===================================================================== 1. THEME TOKENS ===================================================================== */ /* ---- LIGHT (primary / default) ---- */ :root { color-scheme: light; /* Surfaces - warm off-white page, white cards */ --ds-bg: #f4f2ec; /* app background (warm off-white) */ --ds-surface-1: #faf9f5; /* subtle raised */ --ds-surface-2: #ffffff; /* primary card surface */ --ds-surface-3: #ffffff; /* highest elevation */ --ds-surface-glass: rgba(255, 255, 255, 0.72); /* Hairlines & overlays (dark ink on light) */ --ds-hairline: rgba(28, 24, 14, 0.09); --ds-hairline-strong: rgba(28, 24, 14, 0.16); --ds-overlay: rgba(28, 24, 14, 0.035); /* subtle fill (replaces white overlays) */ --ds-overlay-2: rgba(28, 24, 14, 0.06); /* Text (warm near-black) */ --ds-text-hi: #17150f; --ds-text: #3d3a31; --ds-text-lo: #6b665a; --ds-text-mute: #98917f; /* Accent for emphasis text/eyebrows - a deeper gold that stays legible on light surfaces (pair with weight; see a11y note in UI_DESIGN_SYSTEM). */ --ds-accent: #9a781f; /* Feedback - muted, brand-safe (no bright colors) */ --ds-positive: #6f7a3e; --ds-positive-soft: rgba(111, 122, 62, 0.12); --ds-danger: #b1543d; --ds-danger-strong: #964330; --ds-danger-soft: rgba(177, 84, 61, 0.1); /* Elevation - soft, warm-gray shadows */ --el-1: 0 1px 2px rgba(30, 25, 15, 0.06); --el-2: 0 8px 24px rgba(30, 25, 15, 0.08); --el-3: 0 24px 60px rgba(30, 25, 15, 0.12); --el-glow: 0 14px 40px rgba(212, 175, 55, 0.16); /* Ink for text sitting on a gold fill (primary button) */ --ds-on-gold: #211a08; } /* ---- DARK - via system preference (only when no explicit choice) ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --ds-bg: #141416; /* deep charcoal - never pure black */ --ds-surface-1: #1a1a1d; --ds-surface-2: #1f1f23; /* primary card surface */ --ds-surface-3: #26262b; --ds-surface-glass: rgba(24, 24, 28, 0.62); --ds-hairline: rgba(212, 175, 55, 0.14); --ds-hairline-strong: rgba(212, 175, 55, 0.3); --ds-overlay: rgba(255, 255, 255, 0.04); --ds-overlay-2: rgba(255, 255, 255, 0.07); --ds-text-hi: #f5eedf; --ds-text: #d3ccbb; --ds-text-lo: #a49d8b; --ds-text-mute: #797463; --ds-accent: #e3c46f; --ds-positive: #cdb56a; --ds-positive-soft: rgba(205, 181, 106, 0.14); --ds-danger: #e0a598; --ds-danger-strong: #c9705c; --ds-danger-soft: rgba(224, 165, 152, 0.12); --el-1: 0 1px 2px rgba(0, 0, 0, 0.45); --el-2: 0 10px 28px rgba(0, 0, 0, 0.4); --el-3: 0 24px 60px rgba(0, 0, 0, 0.55); --el-glow: 0 16px 44px rgba(212, 175, 55, 0.12); --ds-on-gold: #1a1408; } } /* ---- DARK - explicit choice (wins over system) ---- */ :root[data-theme="dark"] { color-scheme: dark; --ds-bg: #141416; --ds-surface-1: #1a1a1d; --ds-surface-2: #1f1f23; --ds-surface-3: #26262b; --ds-surface-glass: rgba(24, 24, 28, 0.62); --ds-hairline: rgba(212, 175, 55, 0.14); --ds-hairline-strong: rgba(212, 175, 55, 0.3); --ds-overlay: rgba(255, 255, 255, 0.04); --ds-overlay-2: rgba(255, 255, 255, 0.07); --ds-text-hi: #f5eedf; --ds-text: #d3ccbb; --ds-text-lo: #a49d8b; --ds-text-mute: #797463; --ds-accent: #e3c46f; --ds-positive: #cdb56a; --ds-positive-soft: rgba(205, 181, 106, 0.14); --ds-danger: #e0a598; --ds-danger-strong: #c9705c; --ds-danger-soft: rgba(224, 165, 152, 0.12); --el-1: 0 1px 2px rgba(0, 0, 0, 0.45); --el-2: 0 10px 28px rgba(0, 0, 0, 0.4); --el-3: 0 24px 60px rgba(0, 0, 0, 0.55); --el-glow: 0 16px 44px rgba(212, 175, 55, 0.12); --ds-on-gold: #1a1408; } /* ---- Explicit LIGHT (forces light even if OS is dark) ---- */ :root[data-theme="light"] { color-scheme: light; } /* ===================================================================== 2. STATIC TOKENS (theme-independent) ===================================================================== */ :root { /* Brand gold ramp - identical in both themes; gold is an ACCENT only. */ --ds-gold-100: #f7e7a1; --ds-gold-200: #f0d98a; --ds-gold-300: #e3c46f; --ds-gold-500: #d4af37; /* primary metallic gold */ --ds-gold-700: #b79149; --ds-gold-900: #8a6f34; --ds-glow: rgba(212, 175, 55, 0.18); --ds-glow-strong: rgba(212, 175, 55, 0.3); /* Spacing - 8pt rhythm */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px; --sp-9: 64px; /* Radii */ --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* Motion */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-std: cubic-bezier(0.4, 0, 0.2, 1); --dur-1: 140ms; --dur-2: 220ms; --dur-3: 420ms; /* Type - CANONICAL HLC OS typography standard. Playfair Display = headings/titles only. Inter = all other UI. No other font families may be introduced without approval. */ --font-display: "Playfair Display", Georgia, "Times New Roman", serif; --font-ui: "Inter", "Segoe UI", Arial, sans-serif; --fs-xs: 0.72rem; --fs-sm: 0.82rem; --fs-base: 0.9rem; --fs-md: 1rem; --fs-lg: 1.15rem; --fs-xl: 1.45rem; --fs-2xl: 1.9rem; --fs-3xl: 2.5rem; --fs-4xl: 3.4rem; --lh-tight: 1.15; --lh-snug: 1.35; --lh-normal: 1.6; --tracking-eyebrow: 0.18em; /* Breakpoints (reference values for module authors) */ --bp-sm: 40rem; /* 640px */ --bp-md: 48rem; /* 768px - tablet */ --bp-lg: 64rem; /* 1024px */ --bp-xl: 80rem; /* 1280px - desktop content max */ } /* ===================================================================== 3. GLOBAL REFINEMENTS ===================================================================== */ html { scroll-behavior: smooth; } /* --------------------------------------------------------------------- CANONICAL TYPOGRAPHY (global, inherited by every current + future module) Playfair Display for headings; Inter for everything else. Responsive (clamped) sizes; WCAG-friendly line-heights. Class-based titles keep their tuned sizes (higher specificity); raw h1–h6 pick up the canonical scale. */ body { font-family: var(--font-ui); } /* Form controls do NOT inherit font by default - force Inter. */ button, input, select, textarea, optgroup { font-family: var(--font-ui); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--ds-text-hi); line-height: var(--lh-tight); margin: 0; } h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.5rem); font-weight: 700; } /* ~40px */ h2 { font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2rem); font-weight: 700; } /* ~32px */ h3 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.75rem); font-weight: 600; } /* ~28px */ h4 { font-size: 1.5rem; font-weight: 600; } /* 24px */ h5 { font-size: 1.25rem; font-weight: 600; } /* 20px */ h6 { font-size: 1rem; font-weight: 600; } /* Optional display size for hero headings. */ .ds-display { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 1.4rem + 3vw, 3rem); line-height: 1.08; color: var(--ds-text-hi); } ::selection { background: rgba(212, 175, 55, 0.28); color: var(--ds-text-hi); } /* Keyboard-only focus ring. */ :where(button, a, select, input, textarea, [tabindex]):focus-visible { outline: 2px solid var(--ds-gold-500); outline-offset: 2px; border-radius: var(--r-sm); } /* Thin, theme-aware scrollbars. */ * { scrollbar-width: thin; scrollbar-color: rgba(212, 175, 55, 0.3) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.24); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: rgba(212, 175, 55, 0.42); background-clip: content-box; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ===================================================================== 4. MOTION LANGUAGE ===================================================================== */ @keyframes ds-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes ds-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes ds-shimmer { 0% { background-position: -480px 0; } 100% { background-position: 480px 0; } } @keyframes ds-glow-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } .ds-rise { animation: ds-rise var(--dur-3) var(--ease) both; } .ds-fade { animation: ds-fade var(--dur-3) var(--ease) both; } .ds-stagger > * { animation: ds-rise var(--dur-3) var(--ease) both; } .ds-stagger > *:nth-child(1) { animation-delay: 40ms; } .ds-stagger > *:nth-child(2) { animation-delay: 90ms; } .ds-stagger > *:nth-child(3) { animation-delay: 140ms; } .ds-stagger > *:nth-child(4) { animation-delay: 190ms; } .ds-stagger > *:nth-child(5) { animation-delay: 240ms; } .ds-stagger > *:nth-child(6) { animation-delay: 290ms; } .ds-stagger > *:nth-child(7) { animation-delay: 340ms; } .ds-stagger > *:nth-child(8) { animation-delay: 390ms; } /* ===================================================================== 5. PRIMITIVES ===================================================================== */ /* ---- Section header ---- */ .ds-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; } .ds-eyebrow { font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ds-accent); margin: 0 0 var(--sp-2); } .ds-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); line-height: var(--lh-tight); color: var(--ds-text-hi); margin: 0; } /* ---- Buttons ---- */ .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 44px; padding: 11px 20px; /* touch target ≥ 44px */ border-radius: var(--r-pill); border: 1px solid var(--ds-hairline-strong); background: var(--ds-overlay); color: var(--ds-text-hi); font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-base); letter-spacing: 0.01em; cursor: pointer; transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); } .ds-btn:hover { transform: translateY(-1px); border-color: var(--ds-gold-500); box-shadow: var(--el-glow); } .ds-btn:active { transform: translateY(0); } .ds-btn--primary { background: linear-gradient(135deg, var(--ds-gold-500), var(--ds-gold-300)); color: var(--ds-on-gold); border-color: transparent; font-weight: 600; } .ds-btn--primary:hover { box-shadow: 0 16px 40px rgba(212, 175, 55, 0.3); } .ds-btn--quiet { background: transparent; border-color: transparent; color: var(--ds-text-lo); min-height: 0; } .ds-btn--quiet:hover { color: var(--ds-accent); box-shadow: none; transform: none; } .ds-btn--sm { min-height: 36px; padding: 7px 14px; font-size: var(--fs-sm); } .ds-btn:disabled, .ds-btn[disabled] { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.3); transform: none; box-shadow: none; } /* ---- Chips / status ---- */ .ds-chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 5px 12px; border-radius: var(--r-pill); font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-accent); background: rgba(212, 175, 55, 0.1); border: 1px solid var(--ds-hairline); } .ds-chip--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; } .ds-chip--positive { color: var(--ds-positive); background: var(--ds-positive-soft); border-color: color-mix(in srgb, var(--ds-positive) 30%, transparent); } .ds-chip--danger { color: var(--ds-danger-strong); background: var(--ds-danger-soft); border-color: color-mix(in srgb, var(--ds-danger) 30%, transparent); } .ds-chip--neutral { color: var(--ds-text-lo); background: var(--ds-overlay); border-color: var(--ds-hairline); } /* ---- Card ---- */ .ds-card { position: relative; background: var(--ds-surface-2); border: 1px solid var(--ds-hairline); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--el-2); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); } .ds-card--interactive { cursor: pointer; } .ds-card--interactive:hover { transform: translateY(-3px); border-color: var(--ds-hairline-strong); box-shadow: var(--el-3), var(--el-glow); } .ds-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); } .ds-card__title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; color: var(--ds-text-hi); margin: var(--sp-1) 0 0; } /* ---- Fields ---- */ .ds-field { display: flex; flex-direction: column; gap: var(--sp-2); } .ds-field > span, .ds-label { font-size: var(--fs-sm); color: var(--ds-text-lo); letter-spacing: 0.01em; font-weight: 500; } .ds-input, .ds-select, .ds-textarea { width: 100%; min-height: 44px; padding: 11px 14px; border-radius: var(--r-md); border: 1px solid var(--ds-hairline-strong); background: var(--ds-surface-1); color: var(--ds-text-hi); font-family: var(--font-ui); font-size: var(--fs-base); transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .ds-textarea { min-height: 96px; resize: vertical; } .ds-input::placeholder, .ds-textarea::placeholder { color: var(--ds-text-mute); } .ds-input:focus, .ds-select:focus, .ds-textarea:focus { outline: none; border-color: var(--ds-gold-500); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.16); } /* ---- KPI / Stat tile ---- */ .ds-kpi { position: relative; overflow: hidden; background: var(--ds-surface-2); border: 1px solid var(--ds-hairline); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--el-2); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); } .ds-kpi::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, var(--ds-gold-500), transparent); opacity: 0.6; } .ds-kpi:hover { transform: translateY(-3px); border-color: var(--ds-hairline-strong); box-shadow: var(--el-3), var(--el-glow); } .ds-kpi__label { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--ds-text-lo); letter-spacing: 0.02em; } .ds-kpi__value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3xl); line-height: 1; color: var(--ds-text-hi); letter-spacing: 0.01em; } .ds-kpi__foot { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); font-size: var(--fs-xs); } .ds-delta { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--r-pill); font-weight: 600; letter-spacing: 0.01em; color: var(--ds-text-lo); background: var(--ds-overlay); } .ds-delta--up { color: var(--ds-positive); background: var(--ds-positive-soft); } .ds-delta--up::before { content: "↑"; } .ds-delta--down { color: var(--ds-danger-strong); background: var(--ds-danger-soft); } .ds-delta--down::before { content: "↓"; } /* ---- Table ---- */ .ds-table-wrap { width: 100%; overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--ds-hairline); } .ds-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); background: var(--ds-surface-2); } .ds-table th, .ds-table td { padding: 13px 18px; text-align: left; } .ds-table thead th { position: sticky; top: 0; font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-text-lo); background: var(--ds-surface-1); border-bottom: 1px solid var(--ds-hairline); } .ds-table tbody td { color: var(--ds-text); border-bottom: 1px solid var(--ds-hairline); } .ds-table tbody tr:last-child td { border-bottom: none; } .ds-table tbody tr { transition: background var(--dur-1) var(--ease); } .ds-table tbody tr:hover td { background: var(--ds-overlay); } .ds-table .num { text-align: right; font-variant-numeric: tabular-nums; } /* ---- Segmented control (used for theme switch + tabs) ---- */ .ds-segment { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-pill); background: var(--ds-overlay); border: 1px solid var(--ds-hairline); } .ds-segment button { appearance: none; border: none; background: transparent; cursor: pointer; padding: 7px 16px; border-radius: var(--r-pill); min-height: 34px; font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 500; color: var(--ds-text-lo); transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); } .ds-segment button:hover { color: var(--ds-text-hi); } .ds-segment button[aria-pressed="true"], .ds-segment button.is-active { color: var(--ds-text-hi); background: var(--ds-surface-2); box-shadow: var(--el-1); } /* ---- Toast ---- */ .ds-toast { display: inline-flex; align-items: center; gap: var(--sp-3); padding: 14px 18px; border-radius: var(--r-md); background: var(--ds-surface-glass); backdrop-filter: blur(12px); border: 1px solid var(--ds-hairline-strong); color: var(--ds-text-hi); box-shadow: var(--el-3); } .ds-toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ds-gold-500); box-shadow: 0 0 10px var(--ds-gold-500); } /* ---- Skeleton loaders ---- */ .ds-skeleton { display: block; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--ds-overlay) 25%, var(--ds-overlay-2) 37%, var(--ds-overlay) 63%); background-size: 960px 100%; animation: ds-shimmer 1.4s linear infinite; } .ds-skeleton--text { height: 12px; margin-bottom: var(--sp-3); } .ds-skeleton--title { height: 22px; width: 60%; margin-bottom: var(--sp-4); } .ds-skeleton--kpi { height: 96px; } .ds-skeleton--block { height: 160px; } /* ---- Empty state ---- */ .ds-empty { display: grid; place-items: center; gap: var(--sp-2); text-align: center; padding: var(--sp-8) var(--sp-6); color: var(--ds-text-lo); } .ds-empty__mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(212, 175, 55, 0.12); color: var(--ds-gold-500); font-size: 1.2rem; } .ds-empty__title { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ds-text-hi); margin: var(--sp-2) 0 0; } .ds-empty__copy { margin: 0; font-size: var(--fs-sm); max-width: 34ch; } /* Reassuring "all clear" variant - for calm, done states (not unfinished). */ .ds-empty--calm { padding: var(--sp-6); } .ds-empty--calm .ds-empty__mark { color: var(--ds-positive); background: var(--ds-positive-soft); } /* ---- Divider ---- */ .ds-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--ds-hairline-strong), transparent); border: none; margin: var(--sp-6) 0; } /* --------------------------------------------------------------------- INSIGHT CARD - the reusable Executive Command Center card. Anatomy (see docs/DASHBOARD_PATTERN.md): Status · Title · Why it matters · Recommended action · Revenue impact · Confidence. Used by every dashboard (Founder / Team / Client). NEVER rebuilt per screen. --------------------------------------------------------------------- */ .ds-insight { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); background: var(--ds-surface-2); border: 1px solid var(--ds-hairline); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--el-1); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); } .ds-insight:hover { border-color: var(--ds-hairline-strong); box-shadow: var(--el-2); } /* Left priority rail - tone reflects urgency. */ .ds-insight::before { content: ""; position: absolute; inset: var(--sp-4) auto var(--sp-4) 0; width: 3px; border-radius: var(--r-pill); background: var(--ds-hairline-strong); } .ds-insight--risk::before { background: var(--ds-danger); } .ds-insight--act::before { background: var(--ds-gold-500); } .ds-insight--ok::before { background: var(--ds-positive); } .ds-insight__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .ds-insight__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--ds-text-hi); margin: 0; line-height: var(--lh-snug); } /* "Why it matters" - the stakes, one sentence. */ .ds-insight__why { margin: 0; font-size: var(--fs-sm); color: var(--ds-text-lo); line-height: var(--lh-normal); } .ds-insight__why strong { color: var(--ds-text); font-weight: 600; } .ds-insight__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-1); } .ds-insight__meta { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } /* Business-impact tag - distinct, muted. Supports money and non-money impact (e.g. "18 registrations at risk", "High follow-up impact"). */ .ds-impact { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-pill); font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.01em; color: var(--ds-text-lo); background: var(--ds-overlay); border: 1px solid var(--ds-hairline); } .ds-impact::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.65; } .ds-impact--risk { color: var(--ds-danger-strong); background: var(--ds-danger-soft); border-color: color-mix(in srgb, var(--ds-danger) 26%, transparent); } .ds-impact--opp { color: var(--ds-positive); background: var(--ds-positive-soft); border-color: color-mix(in srgb, var(--ds-positive) 26%, transparent); } .ds-impact--soft { color: var(--ds-text-lo); background: var(--ds-overlay); border-color: var(--ds-hairline); } /* Confidence indicator - for AI recommendations only. Facts never carry it. */ .ds-confidence { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-text-mute); } .ds-confidence__dots { display: inline-flex; gap: 3px; } .ds-confidence__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ds-hairline-strong); display: inline-block; } .ds-confidence--high { color: var(--ds-positive); } .ds-confidence--high .ds-confidence__dots i { background: var(--ds-positive); } .ds-confidence--med { color: var(--ds-gold-700); } .ds-confidence--med .ds-confidence__dots i:nth-child(-n+2) { background: var(--ds-gold-500); } .ds-confidence--low { color: var(--ds-text-lo); } .ds-confidence--low .ds-confidence__dots i:first-child { background: var(--ds-text-lo); } /* AI provenance marker - makes interpretation visibly distinct from fact. */ .ds-ai-mark { display: inline-flex; align-items: center; gap: 4px; color: var(--ds-accent); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; } .ds-ai-mark::before { content: "✦"; } /* ===================================================================== 6. LEGACY FLAGSHIP (#dashboardView) - token-driven; reworked during the approved dashboard pass. Reads the theme tokens above so it re-themes automatically once the shell is migrated off dark-pin. ===================================================================== */ #dashboardView { display: none; } #dashboardView.active { display: flex; flex-direction: column; gap: var(--sp-6); } #dashboardView .dashboard-hero-card { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-6); flex-wrap: wrap; padding: var(--sp-8); border-radius: var(--r-xl); border: 1px solid var(--ds-hairline); background: radial-gradient(90% 160% at 0% 0%, rgba(212, 175, 55, 0.12), transparent 46%), linear-gradient(180deg, var(--ds-surface-2), var(--ds-surface-1)); box-shadow: var(--el-3); } #dashboardView .dashboard-hero-card::before { content: ""; position: absolute; top: -40%; right: -10%; width: 420px; height: 420px; background: radial-gradient(circle, var(--ds-glow), transparent 62%); pointer-events: none; animation: ds-glow-pulse 6s var(--ease-std) infinite; } #dashboardView .dashboard-hero-card .eyebrow { font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ds-accent); margin: 0 0 var(--sp-3); } #dashboardView .dashboard-hero-card h3 { font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: 700; line-height: var(--lh-tight); color: var(--ds-text-hi); margin: 0 0 var(--sp-4); max-width: 18ch; } #dashboardView .dashboard-hero-card .hero-copy { color: var(--ds-text-lo); font-size: var(--fs-md); line-height: var(--lh-normal); max-width: 54ch; margin: 0; } #dashboardView .hero-meta { position: relative; text-align: right; padding: var(--sp-5) var(--sp-6); border-radius: var(--r-lg); border: 1px solid var(--ds-hairline); background: var(--ds-surface-glass); backdrop-filter: blur(8px); min-width: 200px; } #dashboardView .hero-meta p { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ds-text-lo); } #dashboardView .hero-meta strong { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--ds-accent); } #dashboardView .summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); } #dashboardView .summary-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; background: var(--ds-surface-2); border: 1px solid var(--ds-hairline); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--el-2); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); } #dashboardView .summary-card::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, var(--ds-gold-500), transparent); opacity: 0.55; } #dashboardView .summary-card:hover { transform: translateY(-3px); border-color: var(--ds-hairline-strong); box-shadow: var(--el-3), var(--el-glow); } #dashboardView .summary-card p { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--ds-text-lo); letter-spacing: 0.02em; } #dashboardView .summary-card strong { display: block; font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; line-height: 1; color: var(--ds-text-hi); letter-spacing: 0.01em; } #dashboardView .summary-trend { display: inline-flex; align-items: center; align-self: flex-start; gap: 5px; margin-top: var(--sp-4); padding: 4px 10px; border-radius: var(--r-pill); font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.01em; color: var(--ds-text-lo); background: var(--ds-overlay); border: 1px solid var(--ds-hairline); } #dashboardView .summary-trend.trend-up { color: var(--ds-positive); background: var(--ds-positive-soft); border-color: color-mix(in srgb, var(--ds-positive) 24%, transparent); } #dashboardView .summary-trend.trend-up::before { content: "↑"; font-size: 0.9em; } #dashboardView .summary-trend.trend-down { color: var(--ds-danger-strong); background: var(--ds-danger-soft); border-color: color-mix(in srgb, var(--ds-danger) 24%, transparent); } #dashboardView .summary-trend.trend-down::before { content: "↓"; font-size: 0.9em; } #dashboardView .panel-card, #dashboardView .assistant-card { background: var(--ds-surface-2); border: 1px solid var(--ds-hairline); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--el-2); transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } #dashboardView .panel-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); } #dashboardView .panel-heading h4 { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; color: var(--ds-text-hi); margin: 0; } #dashboardView .panel-heading .eyebrow { color: var(--ds-accent); } #dashboardView .pill { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 5px 12px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-accent); background: rgba(212, 175, 55, 0.09); border: 1px solid var(--ds-hairline); } #dashboardView .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-gold-500); box-shadow: 0 0 8px var(--ds-glow-strong); } #dashboardView .report-list { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; color: var(--ds-text); } #dashboardView .report-list li { line-height: var(--lh-snug); } #dashboardView .report-list strong { color: var(--ds-accent); } #dashboardView .launch-progress-list { display: grid; gap: var(--sp-4); margin-top: var(--sp-2); } #dashboardView .launch-progress-item { display: grid; gap: var(--sp-2); } #dashboardView .launch-progress-head { display: flex; justify-content: space-between; align-items: baseline; } #dashboardView .launch-progress-head span { color: var(--ds-text-hi); font-weight: 500; } #dashboardView .launch-progress-head strong { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ds-accent); } #dashboardView .progress-track { height: 7px; border-radius: var(--r-pill); background: rgba(212, 175, 55, 0.14); overflow: hidden; } #dashboardView .progress-fill { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--ds-gold-500), var(--ds-gold-300)); box-shadow: 0 0 12px var(--ds-glow); transition: width var(--dur-3) var(--ease); } #dashboardView .launch-progress-meta { margin: 0; font-size: var(--fs-sm); color: var(--ds-text-lo); } #dashboardView .chart-host { border-radius: var(--r-md); padding: var(--sp-2); } #dashboardView .assistant-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-4); } #dashboardView .dashboard-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--sp-4); } #dashboardView .side-panel { display: grid; gap: var(--sp-4); align-content: start; } #dashboardView .assistant-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); } #dashboardView .activity-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); } #dashboardView .activity-list li { padding-left: var(--sp-5); border-left: 2px solid var(--ds-hairline); } @media (max-width: 1100px) { #dashboardView .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #dashboardView .assistant-grid, #dashboardView .dashboard-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { #dashboardView .summary-grid { grid-template-columns: 1fr; } #dashboardView .dashboard-hero-card { padding: var(--sp-7) var(--sp-6); } #dashboardView .dashboard-hero-card h3 { font-size: var(--fs-3xl); } } /* ===================================================================== CANONICAL DESIGN SYSTEM - stable semantic tokens + component classes. Every module (Commerce, Marketplace, AI, Internal OS, Client OS, Team, Reports, future AI Agents) consumes THESE instead of hardcoded values. Theme-aware; maps onto the primitive tokens above. ===================================================================== */ :root { /* Semantic color tokens */ --gold: var(--ds-accent); --gold-hover: var(--ds-gold-700); --gold-active: var(--ds-gold-900); --charcoal: var(--ds-text-hi); --bg: var(--ds-bg); --surface: var(--ds-surface-2); --surface-hover: var(--ds-overlay-2); --border: var(--ds-hairline); --border-strong: var(--ds-hairline-strong); --success: var(--ds-positive); --error: var(--ds-danger); --warning: #b7791f; --warning-soft: rgba(183, 121, 31, 0.14); --info: #2f6f9f; --info-soft: rgba(47, 111, 159, 0.14); --disabled: var(--ds-text-mute); --ds-warning: var(--warning); --ds-warning-soft: var(--warning-soft); --ds-info: var(--info); --ds-info-soft: var(--info-soft); /* Spacing scale (named) */ --space-xs: var(--sp-1); --space-sm: var(--sp-2); --space-md: var(--sp-4); --space-lg: var(--sp-6); --space-xl: var(--sp-8); --space-xxl: var(--sp-9); /* Border radius (by surface) */ --radius-input: var(--r-md); --radius-btn: var(--r-md); --radius-card: var(--r-lg); --radius-modal: var(--r-xl); --radius-table: var(--r-md); /* Shadow system */ --shadow-sm: var(--el-1); --shadow-md: var(--el-2); --shadow-lg: var(--el-3); --shadow-float: var(--el-3); /* Responsive breakpoints (named) */ --bp-mobile: var(--bp-sm); --bp-tablet: var(--bp-md); --bp-laptop: var(--bp-lg); --bp-desktop: var(--bp-xl); --bp-ultrawide: 100rem; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --warning: #e0b34d; --warning-soft: rgba(224, 179, 77, 0.16); --info: #7fb0e0; --info-soft: rgba(127, 176, 224, 0.16); --ds-warning: #e0b34d; --ds-warning-soft: rgba(224, 179, 77, 0.16); --ds-info: #7fb0e0; --ds-info-soft: rgba(127, 176, 224, 0.16); } } [data-theme="dark"] { --warning: #e0b34d; --warning-soft: rgba(224, 179, 77, 0.16); --info: #7fb0e0; --info-soft: rgba(127, 176, 224, 0.16); --ds-warning: #e0b34d; --ds-warning-soft: rgba(224, 179, 77, 0.16); --ds-info: #7fb0e0; --ds-info-soft: rgba(127, 176, 224, 0.16); } /* ---- Status badges (canonical) ---- */ .ds-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid transparent; line-height: 1.4; } .ds-badge--active, .ds-badge--published, .ds-badge--completed, .ds-badge--production { background: var(--ds-positive-soft); color: var(--ds-positive); border-color: var(--ds-positive); } .ds-badge--draft, .ds-badge--archived { background: var(--ds-overlay-2); color: var(--ds-text-mute); border-color: var(--ds-hairline-strong); } .ds-badge--pending { background: var(--ds-warning-soft); color: var(--ds-warning); border-color: var(--ds-warning); } .ds-badge--failed { background: var(--ds-danger-soft); color: var(--ds-danger-strong); border-color: var(--ds-danger); } .ds-badge--sandbox { background: rgba(212, 175, 55, 0.16); color: var(--ds-accent); border-color: var(--ds-gold-500); } .ds-badge--info { background: var(--ds-info-soft); color: var(--ds-info); border-color: var(--ds-info); } /* ---- Button variants (layer on .ds-btn) ---- */ .ds-btn--secondary { background: var(--ds-surface-2); border: 1.5px solid var(--ds-accent); color: var(--ds-text-hi); } .ds-btn--secondary:hover { background: var(--ds-overlay-2); } .ds-btn--ghost { background: transparent; border: 1px solid transparent; color: var(--ds-text-hi); } .ds-btn--ghost:hover { background: var(--ds-overlay-2); } .ds-btn--danger { background: var(--ds-danger); border: 1px solid var(--ds-danger-strong); color: #fff; } .ds-btn--danger:hover { background: var(--ds-danger-strong); } .ds-btn--success { background: var(--ds-positive); border: 1px solid var(--ds-positive); color: #fff; } .ds-btn--disabled, .ds-btn:disabled, .ds-btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ---- Input states (layer on .ds-input) ---- */ .ds-input::placeholder, textarea.ds-input::placeholder { color: var(--ds-text-mute); } .ds-input:hover { border-color: var(--ds-hairline-strong); } .ds-input:focus { outline: none; border-color: var(--ds-accent); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25); } .ds-input--error { border-color: var(--ds-danger); } .ds-input:disabled { opacity: 0.55; cursor: not-allowed; background: var(--ds-overlay); } /* ---- Skeleton loader ---- */ .ds-skeleton { background: linear-gradient(90deg, var(--ds-overlay) 25%, var(--ds-overlay-2) 37%, var(--ds-overlay) 63%); background-size: 400px 100%; animation: ds-shimmer 1.4s ease infinite; border-radius: var(--r-sm); min-height: 12px; }