/* ================================================================ Pana Burn Dashboard — Design Tokens ================================================================ Single source of truth for color, typography, spacing, etc. Light mode is default. Dark mode activates via [data-theme="dark"] on or . Components should use SEMANTIC tokens (--bg-surface, --text-secondary, --color-brand). Raw color scales (--blue-500, --gray-200) exist only for the rare case where a component needs a specific shade. ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { /* ============================================================== COLOR PRIMITIVES — raw scales, do not use in components directly ============================================================== */ /* Brand blue (extracted from Pana logo, color-detected #005CB9) — primary accent */ --blue-50: #EFF6FC; --blue-100: #DAE9F7; --blue-200: #B5D2F0; --blue-300: #7DB1E4; --blue-400: #4690D8; --blue-500: #1F76C9; --blue-600: #0066BD; --blue-700: #005CB9; /* Pana brand blue */ --blue-800: #00468E; --blue-900: #003570; --blue-950: #00214A; /* Brand green (from Pana logo) — also semantic success */ --green-50: #F0FDF4; --green-100: #DCFCE7; --green-200: #BBF7D0; --green-300: #86EFAC; --green-400: #4ADE80; --green-500: #22C55E; /* Pana brand green / success */ --green-600: #16A34A; --green-700: #15803D; --green-800: #166534; --green-900: #14532D; /* Brand pink (from Pana logo) — reserved for active/selected only */ --pink-50: #FDF2F8; --pink-100: #FCE7F3; --pink-200: #FBCFE8; --pink-300: #F9A8D4; --pink-400: #F472B6; --pink-500: #EC4899; /* Pana brand pink — sparingly */ --pink-600: #DB2777; --pink-700: #BE185D; /* Warm neutral gray ramp (stone-leaning, pairs with deep blue) */ --gray-50: #FAFAF9; --gray-100: #F5F5F4; --gray-200: #E7E5E4; --gray-300: #D6D3D1; --gray-400: #A8A29E; --gray-500: #78716C; --gray-600: #57534E; --gray-700: #44403C; --gray-800: #292524; --gray-900: #1C1917; --gray-950: #0C0A09; /* Semantic warning + danger (kept restrained) */ --amber-50: #FFFBEB; --amber-100: #FEF3C7; --amber-500: #F59E0B; --amber-700: #B45309; --red-50: #FEF2F2; --red-100: #FEE2E2; --red-500: #DC2626; --red-700: #B91C1C; /* ============================================================== SEMANTIC TOKENS — light mode (default) Use these in components. ============================================================== */ /* Backgrounds */ --bg-app: var(--gray-50); /* page background */ --bg-surface: #FFFFFF; /* default card */ --bg-surface-raised: #FFFFFF; /* modal, popover */ --bg-surface-subtle: var(--gray-100); /* hover states, secondary surface */ --bg-surface-sunken: var(--gray-100); /* inset wells */ --bg-overlay: rgba(28, 25, 23, 0.4); /* modal scrim */ /* Text */ --text-primary: var(--gray-900); --text-secondary: var(--gray-600); --text-tertiary: var(--gray-400); --text-disabled: var(--gray-300); --text-inverse: #FFFFFF; --text-link: var(--blue-700); --text-link-hover: var(--blue-800); /* Borders */ --border-subtle: var(--gray-200); /* card borders, table dividers */ --border-default: var(--gray-300); /* inputs, default borders */ --border-strong: var(--gray-400); /* hover borders */ --border-brand: var(--blue-700); /* Brand */ --color-brand: var(--blue-700); --color-brand-hover: var(--blue-800); --color-brand-subtle: var(--blue-50); --color-brand-text: var(--blue-700); --color-brand-on: #FFFFFF; /* text on brand background */ --color-secondary: var(--green-500); /* secondary brand — used in charts, positive deltas */ --color-accent: var(--pink-500); /* tertiary — active/selected only */ /* Semantic states */ --color-success: var(--green-600); --color-success-bg: var(--green-50); --color-success-border: var(--green-200); --color-warning: var(--amber-700); --color-warning-bg: var(--amber-50); --color-warning-border: var(--amber-100); --color-danger: var(--red-700); --color-danger-bg: var(--red-50); --color-danger-border: var(--red-100); --color-info: var(--blue-700); --color-info-bg: var(--blue-50); --color-info-border: var(--blue-100); /* ============================================================== DATA VIZ — categorical chart palette Single accent + intensity steps + neutral grays. Matches the "no rainbow charts" decision. ============================================================== */ --chart-1: var(--blue-700); /* primary series — Pana blue */ --chart-2: var(--green-500); /* secondary — Pana green */ --chart-3: var(--blue-400); /* tertiary — lighter blue */ --chart-4: var(--green-300); /* fourth — lighter green */ --chart-5: var(--blue-800); /* fifth — deeper blue */ --chart-6: var(--green-700); /* sixth — deeper green */ --chart-positive: var(--green-600); /* positive delta / inflows */ --chart-negative: var(--red-500); /* negative delta / outflows */ --chart-budget: var(--gray-400); /* budget reference line */ --chart-grid: var(--gray-200); /* gridlines */ --chart-axis: var(--gray-300); /* axis lines */ --chart-label: var(--gray-600); /* axis labels */ --chart-tooltip-bg: var(--gray-900); /* dark tooltip on light bg */ --chart-tooltip-text: #FFFFFF; /* ============================================================== TYPOGRAPHY ============================================================== */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* Tighter scale than typical web — finance ops dashboards benefit from density */ --text-xs: 11px; /* badges, dense table cells, captions */ --text-sm: 12px; /* metadata, helper text */ --text-base: 13px; /* body — DEFAULT */ --text-md: 14px; /* UI default — buttons, inputs */ --text-lg: 16px; /* prominent body, sub-headings */ --text-xl: 20px; /* section heading */ --text-2xl: 24px; /* page heading */ --text-3xl: 32px; /* KPI hero number */ --text-4xl: 48px; /* display — runway hero */ --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.5; --leading-relaxed: 1.6; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.06em; /* SMALL CAPS labels */ /* Tabular figures — critical for any column of numbers */ --font-tabular: 'tnum' 1, 'cv11' 1; /* ============================================================== SPACING — 8px grid (with half-step for tight UI) ============================================================== */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ============================================================== RADII ============================================================== */ --radius-none: 0; --radius-sm: 4px; /* small badges, pills */ --radius-md: 6px; /* buttons, inputs */ --radius-lg: 8px; /* cards */ --radius-xl: 12px; /* modals, larger cards */ --radius-2xl: 16px; /* hero surfaces */ --radius-full: 9999px; /* ============================================================== SHADOWS — restrained (Mercury-style, barely-there) Color uses gray-900 not pure black for warmer feel. ============================================================== */ --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.04); --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.06), 0 1px 2px rgba(28, 25, 23, 0.04); --shadow-md: 0 4px 8px rgba(28, 25, 23, 0.05), 0 2px 4px rgba(28, 25, 23, 0.04); --shadow-lg: 0 12px 24px rgba(28, 25, 23, 0.08), 0 4px 8px rgba(28, 25, 23, 0.04); --shadow-xl: 0 24px 48px rgba(28, 25, 23, 0.12), 0 8px 16px rgba(28, 25, 23, 0.04); /* Focus rings — derived from brand blue */ --shadow-focus: 0 0 0 3px rgba(0, 92, 185, 0.20); --shadow-focus-danger: 0 0 0 3px rgba(220, 38, 38, 0.20); --shadow-focus-success: 0 0 0 3px rgba(34, 197, 94, 0.20); /* ============================================================== MOTION ============================================================== */ --duration-fast: 100ms; --duration-base: 150ms; --duration-slow: 300ms; --duration-slower: 500ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ============================================================== LAYOUT ============================================================== */ --layout-sidebar-width: 240px; --layout-sidebar-collapsed: 64px; --layout-topbar-height: 56px; --layout-content-max: 1440px; --layout-content-pad: var(--space-6); /* ============================================================== Z-INDEX SCALE ============================================================== */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; } /* ================================================================ DARK MODE — semantic token overrides only Activate by adding data-theme="dark" to or . ================================================================ */ [data-theme="dark"] { /* Backgrounds — near-black with slight lift between layers */ --bg-app: var(--gray-950); --bg-surface: var(--gray-900); --bg-surface-raised: var(--gray-800); --bg-surface-subtle: var(--gray-800); --bg-surface-sunken: var(--gray-950); --bg-overlay: rgba(0, 0, 0, 0.6); /* Text */ --text-primary: var(--gray-50); --text-secondary: var(--gray-400); --text-tertiary: var(--gray-500); --text-disabled: var(--gray-700); --text-inverse: var(--gray-900); --text-link: var(--blue-300); --text-link-hover: var(--blue-200); /* Borders */ --border-subtle: var(--gray-800); --border-default: var(--gray-700); --border-strong: var(--gray-600); --border-brand: var(--blue-400); /* Brand — lift in dark for readability */ --color-brand: var(--blue-400); --color-brand-hover: var(--blue-300); --color-brand-subtle: rgba(0, 92, 185, 0.18); --color-brand-text: var(--blue-300); --color-brand-on: #FFFFFF; --color-secondary: var(--green-400); --color-accent: var(--pink-400); /* Semantic — lifted for dark */ --color-success: var(--green-400); --color-success-bg: rgba(34, 197, 94, 0.12); --color-success-border: rgba(34, 197, 94, 0.30); --color-warning: var(--amber-500); --color-warning-bg: rgba(245, 158, 11, 0.12); --color-warning-border: rgba(245, 158, 11, 0.30); --color-danger: var(--red-500); --color-danger-bg: rgba(220, 38, 38, 0.12); --color-danger-border: rgba(220, 38, 38, 0.30); --color-info: var(--blue-400); --color-info-bg: rgba(0, 92, 185, 0.12); --color-info-border: rgba(0, 92, 185, 0.30); /* Chart palette — lifted for dark backgrounds */ --chart-1: var(--blue-400); --chart-2: var(--green-400); --chart-3: var(--blue-200); --chart-4: var(--green-300); --chart-5: var(--blue-700); --chart-6: var(--green-700); --chart-positive: var(--green-400); --chart-negative: var(--red-500); --chart-budget: var(--gray-500); --chart-grid: var(--gray-800); --chart-axis: var(--gray-700); --chart-label: var(--gray-400); --chart-tooltip-bg: var(--gray-100); --chart-tooltip-text: var(--gray-900); /* Shadows — barely visible in dark; rely on inset highlight + heavy fall */ --shadow-xs: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-md: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 12px 32px rgba(0, 0, 0, 0.6); --shadow-xl: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 24px 48px rgba(0, 0, 0, 0.7); --shadow-focus: 0 0 0 3px rgba(70, 144, 216, 0.4); --shadow-focus-danger: 0 0 0 3px rgba(220, 38, 38, 0.4); --shadow-focus-success: 0 0 0 3px rgba(34, 197, 94, 0.4); } /* ================================================================ BASE — applied at the root level ================================================================ */ html { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-primary); background: var(--bg-app); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Numeric content gets tabular figures — non-negotiable for finance UI */ .tabular, table, input[type="number"], [data-tabular], .kpi-value, .amount { font-feature-settings: var(--font-tabular); font-variant-numeric: tabular-nums; } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; } }