/* ============================================================ VanillaPM Design Tokens ---------------------------------------------------------------- Single source of truth. Every component class below references these custom properties — no hard-coded colour, type, or spacing. Maps directly to Section 5.1 / 5.2 / 5.3 of ux-requirements.md. ============================================================ */ :root { /* ── Brand / Primary ─────────────────────────────────────── */ --color-primary: #4F46E5; /* indigo-600 */ --color-primary-hover: #4338CA; /* indigo-700 */ --color-primary-active: #3730A3; /* indigo-800 */ --color-primary-subtle: #E0E7FF; /* indigo-100 */ --color-primary-focus: #6366F1; /* indigo-500 — ring */ /* ── Neutrals — surfaces ─────────────────────────────────── */ --color-surface-page: #F9FAFB; /* gray-50 */ --color-surface-card: #FFFFFF; --color-surface-raised: #F3F4F6; /* gray-100 — tab bar bg */ --color-surface-overlay: rgba(17, 24, 39, 0.5); /* modal backdrop */ /* ── Neutrals — borders ──────────────────────────────────── */ --color-border: #E5E7EB; /* gray-200 */ --color-border-subtle: #F3F4F6; /* gray-100 */ --color-border-strong: #D1D5DB; /* gray-300 */ /* ── Neutrals — text ─────────────────────────────────────── */ --color-text-heading: #111827; /* gray-900 */ --color-text-body: #4B5563; /* gray-600 */ --color-text-muted: #6B7280; /* gray-500 */ --color-text-placeholder: #9CA3AF; /* gray-400 */ --color-text-disabled: #D1D5DB; /* gray-300 */ --color-text-inverse: #FFFFFF; --color-text-link: var(--color-primary); /* ── Feedback ────────────────────────────────────────────── */ --color-error-surface: #FEF2F2; /* red-50 */ --color-error-border: #FECACA; /* red-200 */ --color-error-text: #B91C1C; /* red-700 */ --color-error-strong: #DC2626; /* red-600 — destructive buttons */ --color-error-hover: #B91C1C; --color-success-surface: #DCFCE7; /* green-100 */ --color-success-border: #BBF7D0; /* green-200 */ --color-success-text: #15803D; /* green-700 */ --color-warning-surface: #FEF3C7; /* amber-100 */ --color-warning-border: #FDE68A; /* amber-200 */ --color-warning-text: #B45309; /* amber-700 */ --color-info-surface: #DBEAFE; /* blue-100 */ --color-info-border: #BFDBFE; /* blue-200 */ --color-info-text: #1D4ED8; /* blue-700 */ /* ── Status badges — task status ─────────────────────────── */ --badge-todo-bg: #F3F4F6; --badge-todo-text: #374151; --badge-inprogress-bg: #DBEAFE; --badge-inprogress-text: #1D4ED8; --badge-inreview-bg: #FEF3C7; --badge-inreview-text: #B45309; --badge-done-bg: #DCFCE7; --badge-done-text: #15803D; /* ── Task / risk priority + severity (low → critical) ────── */ --badge-low-bg: #F3F4F6; --badge-low-text: #374151; --badge-medium-bg: #DBEAFE; --badge-medium-text: #1D4ED8; --badge-high-bg: #FEF3C7; --badge-high-text: #B45309; --badge-critical-bg: #FEE2E2; --badge-critical-text: #B91C1C; /* ── Project status (PMBOK process groups) ───────────────── */ --badge-initiating-bg: #E0E7FF; --badge-initiating-text: #4338CA; --badge-planning-bg: #DBEAFE; --badge-planning-text: #1D4ED8; --badge-executing-bg: #DCFCE7; --badge-executing-text: #15803D; --badge-monitoring-bg: #FEF3C7; --badge-monitoring-text: #B45309; --badge-closing-bg: #F3F4F6; --badge-closing-text: #374151; /* ── Budget item type ────────────────────────────────────── */ --badge-labour-bg: #E0E7FF; --badge-labour-text: #4338CA; --badge-material-bg: #FEF3C7; --badge-material-text: #B45309; --badge-equipment-bg: #DBEAFE; --badge-equipment-text: #1D4ED8; --badge-service-bg: #DCFCE7; --badge-service-text: #15803D; --badge-contingency-bg: #FEE2E2; --badge-contingency-text: #B91C1C; --badge-other-bg: #F3F4F6; --badge-other-text: #374151; /* ── Role badges (project + org) ─────────────────────────── */ --badge-pm-bg: #E0E7FF; --badge-pm-text: #4338CA; --badge-member-bg: #DBEAFE; --badge-member-text: #1D4ED8; --badge-viewer-bg: #F3F4F6; --badge-viewer-text: #374151; --badge-owner-bg: #E0E7FF; --badge-owner-text: #4338CA; --badge-admin-bg: #DBEAFE; --badge-admin-text: #1D4ED8; /* ── Typography — families ───────────────────────────────── */ --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ── Typography — scale (size / line-height / weight) ────── */ /* All values in px; line-heights unitless. */ --fs-display: 72px; --lh-display: 1.05; --fw-display: 700; --fs-h1: 36px; --lh-h1: 1.2; --fw-h1: 600; --fs-h2: 24px; --lh-h2: 1.3; --fw-h2: 600; --fs-h3: 18px; --lh-h3: 1.4; --fw-h3: 600; --fs-body-lg: 17px; --lh-body-lg: 1.6; --fw-body-lg: 400; --fs-body: 15px; --lh-body: 1.55; --fw-body: 400; --fs-body-sm: 13px; --lh-body-sm: 1.5; --fw-body-sm: 400; --fs-label: 12px; --lh-label: 1.4; --fw-label: 500; --fs-caption: 12px; --lh-caption: 1.45; --fw-caption: 400; --fs-badge: 11px; --lh-badge: 1; --fw-badge: 600; --fs-code: 13px; --lh-code: 1.5; --fw-code: 500; /* Mobile size overrides (applied via @media — see components.css) */ --fs-display-mobile: 56px; --fs-h1-mobile: 30px; --fs-h2-mobile: 22px; /* ── Spacing scale (4px base) ────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ── Radii ───────────────────────────────────────────────── */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px; /* ── Shadows ─────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(17,24,39,0.04); --shadow-sm: 0 1px 2px rgba(17,24,39,0.04), 0 1px 3px rgba(17,24,39,0.06); --shadow-md: 0 4px 6px -1px rgba(17,24,39,0.06), 0 2px 4px -2px rgba(17,24,39,0.06); --shadow-lg: 0 10px 15px -3px rgba(17,24,39,0.08), 0 4px 6px -4px rgba(17,24,39,0.04); --shadow-xl: 0 20px 25px -5px rgba(17,24,39,0.10), 0 8px 10px -6px rgba(17,24,39,0.04); --shadow-focus: 0 0 0 3px rgba(99,102,241,0.35); /* indigo-500 @ 35% */ /* ── Motion ──────────────────────────────────────────────── */ --motion-fast: 120ms; --motion-base: 180ms; --motion-slow: 240ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ── Layout containers ───────────────────────────────────── */ --container-page: 1024px; /* max-w-5xl */ --container-narrow: 768px; --container-modal: 512px; /* max-w-lg */ --container-modal-sm: 384px; /* confirm dialog */ /* ── Z-index scale ──────────────────────────────────────── */ --z-base: 0; --z-sticky: 20; --z-dropdown: 30; --z-tooltip: 40; --z-modal: 50; --z-toast: 60; /* ── Tap target ──────────────────────────────────────────── */ --tap-target-min: 44px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }