/* ===================================================================== PCS Design System — "Vibrant / Radiant Pearl" Shared design tokens & primitives. Reference once from the host. Keep this file identical across PCS apps (single source of truth). ===================================================================== */ /* --- RADIANT PEARL DESIGN SYSTEM TOKENS --- */ :root { --pearl-primary: #012552; /* PCS Navy */ --pearl-secondary: #32C0E6; /* PCS Sky */ --pearl-accent: #8AB840; /* PCS Lime */ --pearl-gold: #E4B123; /* PCS Gold */ --pearl-orange: #E15100; /* PCS Orange */ --pearl-green: #008037; /* Success */ --pearl-bg: #f8fafc; /* App canvas */ --pearl-surface: #ffffff; /* Cards */ --pearl-slate: #64748b; /* Secondary */ --pearl-ink: #0f172a; /* Primary text */ --pearl-hairline: #e2e8f0; /* Surface / elevation tokens (theme-aware) */ --pearl-card-bg: rgba(255, 255, 255, 0.95); --pearl-card-border: rgba(0, 0, 0, 0.06); --pearl-card-border-hover: rgba(1, 37, 82, 0.2); --pearl-card-hover-shadow: 0 16px 32px -12px rgba(1, 37, 82, 0.12); --pearl-sheet-bg: #ffffff; --pearl-elev-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.06), 0 0 12px -3px rgba(0, 0, 0, 0.03); --pearl-elev-border: rgba(255, 255, 255, 1); --pearl-arrow-hover: #012552; --pearl-ease: cubic-bezier(0.165, 0.84, 0.44, 1); } /* === DARK MODE ============================================================ NOTE: design.md does not (yet) define a dark palette. This is a brand-consistent extension derived from the PCS tokens — a deep navy canvas with inverted glass surfaces; brand accents (lime/sky/gold) stay vivid. Toggle by adding class `pcs-dark` to a wrapper (or ). ========================================================================= */ .pcs-dark { --pearl-bg: #0a1626; /* deep navy-black canvas */ --pearl-surface: #11243f; /* raised navy surface */ --pearl-ink: #eef2f8; /* near-white primary text */ --pearl-slate: #9fb0c5; /* muted secondary text */ --pearl-hairline: rgba(255, 255, 255, 0.10); --pearl-card-bg: rgba(255, 255, 255, 0.045); --pearl-card-border: rgba(255, 255, 255, 0.09); --pearl-card-border-hover: rgba(138, 184, 64, 0.45); /* lime glow */ --pearl-card-hover-shadow: 0 18px 36px -12px rgba(0, 0, 0, 0.6); --pearl-sheet-bg: #11243f; --pearl-elev-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.55), 0 0 14px -3px rgba(0, 0, 0, 0.4); --pearl-elev-border: rgba(255, 255, 255, 0.08); --pearl-arrow-hover: #8AB840; /* lime reads better on dark */ } /* Brand gradients */ .pearl-aurora { background: linear-gradient(90deg, #8AB840 0%, #32C0E6 100%); } .pearl-navy { background: linear-gradient(135deg, rgba(1,53,110,0.95) 0%, rgba(1,37,82,0.98) 100%); } .pearl-sunset { background: linear-gradient(135deg, rgba(245,130,32,0.95) 0%, rgba(225,81,0,0.95) 100%); } /* === SLEEK CARD === */ .sleek-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid var(--pearl-card-border); background: var(--pearl-card-bg); backdrop-filter: blur(10px); border-radius: 20px; } .sleek-card:hover { transform: translateY(-5px); box-shadow: var(--pearl-card-hover-shadow); border-color: var(--pearl-card-border-hover); } .text-slate { color: var(--pearl-slate) !important; } /* === SOFT GLASS BADGES === */ .glass-pill-sm { padding: 6px 16px; border-radius: 100px; font-size: 0.7rem; font-weight: 700; display: inline-flex; align-items: center; white-space: nowrap; width: fit-content; border: 1px solid transparent; transition: transform 0.2s ease, box-shadow 0.2s ease; letter-spacing: 0.03em; } .glass-pill-sm:hover { transform: translateY(-1.5px); box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08); } /* Semantic glass variants (HSL-derived translucent fills) */ .glass-primary { background: #01255225; color: #012552; border: 1px solid #01255245; } .glass-success { background: #00803725; color: #008037; border: 1px solid #00803745; } .glass-warning { background: #E4B12325; color: #b45309; border: 1px solid #E4B12345; } .glass-error { background: rgba(205, 28, 24, 0.15); color: #CD1C18; border: 1px solid rgba(205, 28, 24, 0.4); } .glass-info { background: #32C0E625; color: #1e6275; border: 1px solid #32C0E645; } .glass-neutral { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; } /* Dark-mode glass variants — lift text legibility on the dark canvas */ .pcs-dark .glass-primary { background: rgba(120, 170, 255, 0.14); color: #9cc2ff; border-color: rgba(120, 170, 255, 0.30); } .pcs-dark .glass-success { background: rgba(0, 128, 55, 0.22); color: #5fd08a; border-color: rgba(0, 128, 55, 0.42); } .pcs-dark .glass-warning { background: rgba(228, 177, 35, 0.18); color: #f1c453; border-color: rgba(228, 177, 35, 0.38); } .pcs-dark .glass-error { background: rgba(205, 28, 24, 0.22); color: #f08a87; border-color: rgba(205, 28, 24, 0.45); } .pcs-dark .glass-info { background: rgba(50, 192, 230, 0.16); color: #6fd3ee; border-color: rgba(50, 192, 230, 0.38); } .pcs-dark .glass-neutral { background: rgba(255, 255, 255, 0.06); color: #9fb0c5; border-color: rgba(255, 255, 255, 0.12); } /* === ELEVATION LAYERS (The Pearl Suite) === */ .floating-pearl { box-shadow: var(--pearl-elev-shadow); border: 1px solid var(--pearl-elev-border); transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); background: var(--pearl-surface); } .floating-pearl:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -15px rgba(0, 0, 0, 0.1), 0 8px 15px -5px rgba(0, 0, 0, 0.06); } .navy-glow { box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.06), 0 0 12px -3px rgba(0, 0, 0, 0.03); border: 1px solid rgba(1, 36, 82, 0.12); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } /* Large container wrapper — premium 24px radius */ .design-sheet { border-radius: 24px !important; background-color: var(--pearl-sheet-bg) !important; border-color: var(--pearl-hairline) !important; padding: 2rem !important; } /* Section accent line — guides the eye above section headers */ .section-accent-line { width: 40px; height: 4px; border-radius: 2px; background: #32C0E6; } /* Custom thin scrollbar for wide tables */ .custom-scroll::-webkit-scrollbar { width: 4px; height: 6px; } .custom-scroll::-webkit-scrollbar-track { background: transparent; } .custom-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 10px; } .custom-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); } /* === PAGE HERO — the signature banner === */ .pearl-hero { position: relative; overflow: hidden; min-height: 200px; display: flex; align-items: center; border-radius: 16px; } .pearl-hero__bg { position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: linear-gradient(135deg, #012552 0%, #004B8D 100%); } .pearl-hero__content { position: relative; z-index: 10; padding: 2.5rem 2rem; width: 100%; } .pearl-hero__accent { width: 60px; height: 4px; background: #8AB840; border-radius: 2px; margin-bottom: 12px; } .pearl-hero__title { font-family: 'Prompt', sans-serif; font-weight: 800; color: white; letter-spacing: -1.5px; line-height: 0.9; margin: 0; } .pearl-hero__subtitle { color: rgba(255,255,255,0.8); font-family: 'Inter', sans-serif; font-weight: 300; max-width: 600px; line-height: 1.4; margin-top: 16px; font-size: 1.1rem; }