/** * ============================================================ * PAPUA HUB — Design Token System * Version: 1.0 | March 2026 * * PATCH INSTRUCTIONS: * 1. Import this file at the TOP of your global CSS: * @import './papua-hub-design-tokens.css'; * OR in JS/TS entrypoint: * import './papua-hub-design-tokens.css'; * * 2. Replace all hardcoded hex values in components with * the CSS custom properties defined below. * * 3. For dark mode: add class="dark" to or . * * NON-BREAKING: Adding this file does NOT change existing * styles unless you actively replace hardcoded values. * ============================================================ */ /* ============================================================ ROOT — Light Mode Tokens ============================================================ */ :root { /* ── Brand Core ── */ --papua-blue: #1A3C5E; --papua-blue-light: #2E5B8A; --papua-blue-pale: #E8F0F8; --papua-blue-deep: #0D1B2A; --accent-gold: #BBC35D; --action-orange: #FF7A18; --action-orange-light: #FFF0E6; /* ── Semantic Colors ── */ --color-success: #22C55E; --color-success-bg: #F0FDF4; --color-success-border:#BBF7D0; --color-warning: #F59E0B; --color-warning-bg: #FFFBEB; --color-warning-border:#FDE68A; --color-danger: #EF4444; --color-danger-bg: #FFF5F5; --color-danger-border: #FECACA; --color-info: #3B82F6; --color-info-bg: #EFF6FF; --color-info-border: #BFDBFE; /* ── Surface & Background ── */ --bg-page: #F1F5F9; --bg-surface: #FFFFFF; --bg-surface-alt: #F8FAFC; --bg-overlay: rgba(0, 0, 0, 0.4); /* ── Text ── */ --text-primary: #1E293B; --text-secondary: #475569; --text-tertiary: #64748B; --text-disabled: #94A3B8; --text-inverse: #FFFFFF; --text-link: #1A3C5E; --text-link-hover: #2E5B8A; /* ── Border ── */ --border-default: #E2E8F0; --border-strong: #CBD5E1; --border-focus: #1A3C5E; --border-error: #EF4444; /* ── Sidebar ── */ --sidebar-bg: #1A3C5E; --sidebar-text: rgba(255, 255, 255, 0.7); --sidebar-text-active: #FFFFFF; --sidebar-item-active: rgba(255, 255, 255, 0.12); --sidebar-item-hover: rgba(255, 255, 255, 0.08); --sidebar-accent: #BBC35D; --sidebar-label: rgba(255, 255, 255, 0.4); /* ── Spacing ── */ --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; /* ── Border Radius ── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 9999px; /* ── Typography ── */ --font-heading: 'Poppins', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; --text-h1: 28px; --text-h2: 22px; --text-h3: 16px; --text-body: 14px; --text-small: 14px; --text-caption: 12px; --text-code: 13px; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.3; --leading-snug: 1.4; --leading-normal: 1.5; --leading-relaxed:1.6; /* ── Shadows ── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-lg: 0 4px 12px rgba(26, 60, 94, 0.12); --shadow-xl: 0 8px 24px rgba(26, 60, 94, 0.16); --shadow-focus:0 0 0 3px rgba(26, 60, 94, 0.15); /* ── Transitions ── */ --transition-fast: 100ms ease; --transition-normal: 200ms ease; --transition-medium: 300ms ease-out; --transition-slow: 500ms ease-in-out; /* ── Layout ── */ --sidebar-width: 240px; --sidebar-width-collapsed: 64px; --navbar-height: 64px; --content-max-width: 1280px; --content-padding-x: 32px; --content-padding-y: 24px; /* ── Z-Index Scale ── */ --z-dropdown: 100; --z-sticky: 200; --z-navbar: 300; --z-sidebar: 400; --z-modal: 500; --z-toast: 600; --z-tooltip: 700; } /* ============================================================ DARK MODE OVERRIDES Apply class="dark" to or ============================================================ */ .dark { --bg-page: #0F1E2D; --bg-surface: #1A2D40; --bg-surface-alt: #243347; --bg-overlay: rgba(0, 0, 0, 0.6); --text-primary: #E2ECF5; --text-secondary: #B0C4D8; --text-tertiary: #94A3B8; --text-disabled: #4B6280; --text-link: #93C5FD; --text-link-hover:#BFDBFE; --border-default: #2E4A65; --border-strong: #3A5B78; --border-focus: #60A5FA; --sidebar-bg: #0D1B2A; --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.14); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.3); } /* ============================================================ BASE COMPONENT TOKENS — Applied globally ============================================================ */ /* Buttons */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 10px 20px; border-radius: var(--radius-md); font-family: var(--font-heading); font-size: var(--text-small); font-weight: var(--weight-semibold); cursor: pointer; transition: background-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-fast); border: none; text-decoration: none; white-space: nowrap; } .btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; } .btn-primary { background: var(--action-orange); color: var(--text-inverse); } .btn-primary:hover { background: #E86B10; box-shadow: var(--shadow-lg); } .btn-secondary { background: var(--papua-blue); color: var(--text-inverse); } .btn-secondary:hover { background: var(--papua-blue-light); } .btn-outline { background: transparent; color: var(--papua-blue); border: 1.5px solid var(--papua-blue); } .btn-outline:hover { background: var(--papua-blue-pale); } .btn-ghost { background: transparent; color: var(--text-tertiary); } .btn-ghost:hover { background: var(--bg-surface-alt); color: var(--text-primary); } .btn-danger { background: var(--color-danger); color: var(--text-inverse); } .btn-danger:hover { background: #DC2626; } .btn-success { background: var(--color-success); color: var(--text-inverse); } .btn-success:hover { background: #16A34A; } /* Size variants */ .btn-sm { padding: 6px 14px; font-size: var(--text-caption); height: 32px; } .btn-lg { padding: 14px 28px; font-size: var(--text-body); height: 48px; } /* Inputs */ .input { display: block; width: 100%; height: 40px; padding: 10px 14px; font-family: var(--font-body); font-size: var(--text-body); color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); transition: border-color var(--transition-normal), box-shadow var(--transition-normal); outline: none; } .input::placeholder { color: var(--text-disabled); } .input:focus { border-color: var(--border-focus); border-width: 2px; box-shadow: var(--shadow-focus); } .input:disabled { background: var(--bg-surface-alt); border-color: var(--border-default); color: var(--text-disabled); cursor: not-allowed; } .input-error { border-color: var(--border-error); background: var(--color-danger-bg); } .input-error:focus { border-color: var(--border-error); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); } /* Cards */ .card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-md); transition: box-shadow var(--transition-normal); } .card:hover { box-shadow: var(--shadow-lg); } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-default); } .card-title { font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--weight-semibold); color: var(--text-primary); } /* Badges / Status */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 10px; border-radius: var(--radius-full); font-family: var(--font-heading); font-size: var(--text-caption); font-weight: var(--weight-semibold); white-space: nowrap; } .badge-success { background: var(--color-success-bg); color: #15803D; border: 1px solid var(--color-success-border); } .badge-warning { background: var(--color-warning-bg); color: #B45309; border: 1px solid var(--color-warning-border); } .badge-danger { background: var(--color-danger-bg); color: #DC2626; border: 1px solid var(--color-danger-border); } .badge-info { background: var(--color-info-bg); color: #1D4ED8; border: 1px solid var(--color-info-border); } .badge-gold { background: #FAFAEC; color: #7A6B10; border: 1px solid #D4CC6A; } .badge-neutral { background: var(--bg-surface-alt); color: var(--text-tertiary); border: 1px solid var(--border-default); } /* Alert Banners */ .alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); border-left: 4px solid; } .alert-danger { background: var(--color-danger-bg); border-left-color: var(--color-danger); color: #991B1B; } .alert-warning { background: var(--color-warning-bg); border-left-color: var(--color-warning); color: #92400E; } .alert-success { background: var(--color-success-bg); border-left-color: var(--color-success); color: #166534; } .alert-info { background: var(--color-info-bg); border-left-color: var(--color-info); color: #1E40AF; } /* Sidebar */ .sidebar { width: var(--sidebar-width); background: var(--sidebar-bg); height: 100vh; position: fixed; left: 0; top: 0; z-index: var(--z-sidebar); display: flex; flex-direction: column; transition: width var(--transition-slow); overflow: hidden; } .sidebar.collapsed { width: var(--sidebar-width-collapsed); } .sidebar-logo { height: var(--navbar-height); display: flex; align-items: center; padding: 0 var(--space-4); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .sidebar-nav-item { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-4); color: var(--sidebar-text); font-family: var(--font-body); font-size: var(--text-body); text-decoration: none; border-radius: var(--radius-md); margin: 2px var(--space-2); transition: background-color var(--transition-normal), color var(--transition-normal); cursor: pointer; white-space: nowrap; overflow: hidden; } .sidebar-nav-item:hover { background: var(--sidebar-item-hover); color: var(--sidebar-text-active); } .sidebar-nav-item.active { background: var(--sidebar-item-active); color: var(--sidebar-text-active); font-weight: var(--weight-semibold); border-left: 3px solid var(--sidebar-accent); padding-left: calc(var(--space-4) - 3px); } .sidebar-section-label { font-family: var(--font-body); font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sidebar-label); padding: var(--space-4) var(--space-4) var(--space-2); } /* Navbar */ .navbar { height: var(--navbar-height); background: var(--bg-surface); border-bottom: 1px solid var(--border-default); position: fixed; top: 0; left: var(--sidebar-width); right: 0; z-index: var(--z-navbar); display: flex; align-items: center; padding: 0 var(--content-padding-x); box-shadow: var(--shadow-sm); transition: left var(--transition-slow); } /* Page Layout */ .page-wrapper { margin-left: var(--sidebar-width); margin-top: var(--navbar-height); padding: var(--content-padding-y) var(--content-padding-x); min-height: calc(100vh - var(--navbar-height)); background: var(--bg-page); transition: margin-left var(--transition-slow); } .page-wrapper.sidebar-collapsed { margin-left: var(--sidebar-width-collapsed); } .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-6); } .page-title { font-family: var(--font-heading); font-size: var(--text-h1); font-weight: var(--weight-bold); color: var(--text-primary); line-height: var(--leading-tight); } .page-subtitle { font-family: var(--font-body); font-size: var(--text-body); color: var(--text-tertiary); margin-top: var(--space-1); } /* Tables */ .data-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: var(--text-body); } .data-table th { background: var(--papua-blue-pale); color: var(--papua-blue); font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.05em; padding: 10px 16px; text-align: left; border-bottom: 2px solid var(--border-default); } .data-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-default); color: var(--text-primary); } .data-table tr:hover td { background: var(--bg-surface-alt); } /* Skeleton Loading */ .skeleton { background: linear-gradient(90deg, var(--border-default) 25%, var(--bg-surface-alt) 50%, var(--border-default) 75%); background-size: 200% 100%; animation: skeleton-pulse 1.5s ease-in-out infinite; border-radius: var(--radius-sm); } @keyframes skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Loading Spinner */ .spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--border-default); border-top-color: var(--papua-blue); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Toast Notifications */ .toast { position: fixed; bottom: var(--space-6); right: var(--space-6); z-index: var(--z-toast); display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); border-left: 4px solid var(--papua-blue); font-family: var(--font-body); font-size: var(--text-body); animation: toast-in 300ms ease-out forwards; max-width: 360px; } @keyframes toast-in { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Modal */ .modal-backdrop { position: fixed; inset: 0; background: var(--bg-overlay); z-index: var(--z-modal); animation: fade-in 200ms ease; } .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); z-index: calc(var(--z-modal) + 1); animation: modal-in 200ms ease-out; max-width: 520px; width: calc(100% - var(--space-8)); padding: var(--space-6); } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-in { from { transform: translate(-50%, -50%) scale(0.95); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } } /* Tooltips */ .tooltip { position: relative; } .tooltip::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--text-primary); color: var(--text-inverse); font-family: var(--font-body); font-size: var(--text-caption); padding: 6px 10px; border-radius: var(--radius-sm); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--transition-fast); z-index: var(--z-tooltip); } .tooltip:hover::after { opacity: 1; } /* Dividers */ .divider { height: 1px; background: var(--border-default); margin: var(--space-6) 0; } .divider-vertical { width: 1px; background: var(--border-default); align-self: stretch; } /* Monospace / Code */ .code-inline { font-family: var(--font-mono); font-size: var(--text-code); background: var(--bg-surface-alt); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 1px 6px; color: var(--papua-blue); } /* Responsive utilities */ @media (max-width: 1024px) { :root { --content-padding-x: var(--space-4); --content-padding-y: var(--space-4); } .sidebar { width: var(--sidebar-width-collapsed); } .navbar { left: var(--sidebar-width-collapsed); } .page-wrapper { margin-left: var(--sidebar-width-collapsed); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }