/* ============================================================
PULSEIntel PRO — Foundations
Colors, Typography, Spacing, Radius, Shadows, Gradient
============================================================ */
/* Inter pulled from Google Fonts (substitute — swap to licensed Inter Heavy in fonts/ when available). */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");
/* Open Sans — brand-supplied */
@font-face { font-family: "Open Sans"; src: url("fonts/OpenSans-Regular-webfont.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
/* Poppins — brand-supplied family */
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Thin.ttf") format("truetype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-ThinItalic.ttf") format("truetype"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-ExtraLight.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-ExtraLightItalic.ttf") format("truetype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-MediumItalic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-SemiBoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-ExtraBoldItalic.ttf") format("truetype"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-BlackItalic.ttf") format("truetype"); font-weight: 900; font-style: italic; font-display: swap; }
:root {
/* -------- Brand colors -------- */
--pi-purple: #4F1E86;
--pi-pink: #D33C95;
--pi-blue: #03B2ED;
--pi-light: #D8E0E8;
--pi-dark: #0D0F14;
/* Tints / shades derived for UI use */
--pi-purple-900: #2A0F49;
--pi-purple-800: #3A1666;
--pi-purple-700: #4F1E86;
--pi-purple-600: #6A35A8;
--pi-purple-500: #8B5CC8;
--pi-purple-100: #EFE5FA;
--pi-purple-050: #F8F4FD;
--pi-pink-700: #B22D7C;
--pi-pink-500: #D33C95;
--pi-pink-100: #FAD9EC;
--pi-blue-700: #028CB8;
--pi-blue-500: #03B2ED;
--pi-blue-100: #CBEEFB;
/* Neutrals (cool gray progression seeded from #D8E0E8 / #0D0F14) */
--pi-neutral-000: #FFFFFF;
--pi-neutral-050: #F5F7FA;
--pi-neutral-100: #ECF0F4;
--pi-neutral-200: #D8E0E8;
--pi-neutral-300: #B9C3CE;
--pi-neutral-400: #8B97A4;
--pi-neutral-500: #5C6773;
--pi-neutral-600: #3D4651;
--pi-neutral-700: #252A33;
--pi-neutral-800: #161A20;
--pi-neutral-900: #0D0F14;
/* -------- Semantic surface / text (light theme) -------- */
--pi-bg: var(--pi-neutral-000);
--pi-bg-subtle: var(--pi-neutral-050);
--pi-bg-muted: var(--pi-neutral-100);
--pi-surface: var(--pi-neutral-000);
--pi-surface-alt: var(--pi-neutral-050);
--pi-border: var(--pi-neutral-200);
--pi-border-strong:var(--pi-neutral-300);
--pi-divider: rgba(13, 15, 20, 0.08);
--pi-fg: var(--pi-neutral-900);
--pi-fg-muted: var(--pi-neutral-600);
--pi-fg-subtle: var(--pi-neutral-500);
--pi-fg-inverse: var(--pi-neutral-000);
--pi-link: var(--pi-purple-700);
--pi-link-hover: var(--pi-purple-600);
/* -------- Semantic status -------- */
--pi-success: #1FA971;
--pi-warning: #E2A52B;
--pi-danger: #D6453E;
--pi-info: var(--pi-blue-500);
/* -------- Gradient (the brand signature) -------- */
--pi-gradient: linear-gradient(90deg, #4F1E86 0%, #D33C95 50%, #03B2ED 100%);
--pi-gradient-soft: linear-gradient(90deg, rgba(79,30,134,.10) 0%, rgba(211,60,149,.10) 50%, rgba(3,178,237,.10) 100%);
--pi-gradient-radial: radial-gradient(120% 80% at 0% 0%, #4F1E86 0%, #1A0A36 60%, #0D0F14 100%);
/* -------- Type families -------- */
--pi-font-display: "Inter", "Helvetica Neue", Arial, sans-serif; /* Inter Heavy/Black */
--pi-font-ui: "Poppins", "Inter", system-ui, sans-serif;
--pi-font-body: "Open Sans", "Inter", system-ui, sans-serif;
--pi-font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;
/* -------- Type scale -------- */
--pi-text-xs: 12px;
--pi-text-sm: 14px;
--pi-text-base: 16px;
--pi-text-md: 18px;
--pi-text-lg: 20px;
--pi-text-xl: 24px;
--pi-text-2xl: 32px;
--pi-text-3xl: 44px;
--pi-text-4xl: 60px;
--pi-text-5xl: 80px;
/* Line heights */
--pi-leading-tight: 1.05;
--pi-leading-snug: 1.2;
--pi-leading-normal: 1.5;
--pi-leading-loose: 1.7;
/* Letter spacing */
--pi-tracking-tight: -0.02em;
--pi-tracking-snug: -0.01em;
--pi-tracking-wide: 0.04em;
--pi-tracking-caps: 0.12em;
/* -------- Spacing scale (4pt) -------- */
--pi-space-1: 4px;
--pi-space-2: 8px;
--pi-space-3: 12px;
--pi-space-4: 16px;
--pi-space-5: 20px;
--pi-space-6: 24px;
--pi-space-8: 32px;
--pi-space-10: 40px;
--pi-space-12: 48px;
--pi-space-16: 64px;
--pi-space-20: 80px;
--pi-space-24: 96px;
/* -------- Radius -------- */
--pi-radius-xs: 4px;
--pi-radius-sm: 6px;
--pi-radius-md: 10px;
--pi-radius-lg: 14px;
--pi-radius-xl: 20px;
--pi-radius-2xl: 28px;
--pi-radius-pill: 999px;
/* -------- Shadow -------- */
--pi-shadow-xs: 0 1px 2px rgba(13,15,20,.06);
--pi-shadow-sm: 0 1px 3px rgba(13,15,20,.08), 0 1px 2px rgba(13,15,20,.04);
--pi-shadow-md: 0 4px 12px rgba(13,15,20,.08), 0 2px 4px rgba(13,15,20,.05);
--pi-shadow-lg: 0 12px 28px rgba(13,15,20,.12), 0 4px 8px rgba(13,15,20,.06);
--pi-shadow-xl: 0 24px 60px rgba(13,15,20,.18), 0 8px 16px rgba(13,15,20,.08);
--pi-shadow-glow-purple: 0 0 0 4px rgba(79,30,134,.15);
--pi-shadow-glow-pink: 0 0 0 4px rgba(211,60,149,.18);
--pi-shadow-glow-blue: 0 0 0 4px rgba(3,178,237,.20);
--pi-shadow-inset: inset 0 1px 0 rgba(255,255,255,.7);
/* -------- Motion -------- */
--pi-ease-standard: cubic-bezier(.2,.7,.2,1);
--pi-ease-emphasis: cubic-bezier(.2,.9,.1,1);
--pi-dur-fast: 140ms;
--pi-dur-base: 220ms;
--pi-dur-slow: 420ms;
}
/* ============================================================
DARK THEME — premium "command center" surfaces
============================================================ */
:root[data-theme="dark"],
.pi-dark {
--pi-bg: var(--pi-neutral-900);
--pi-bg-subtle: var(--pi-neutral-800);
--pi-bg-muted: var(--pi-neutral-700);
--pi-surface: #14171F;
--pi-surface-alt: #1B1F29;
--pi-border: rgba(255,255,255,.08);
--pi-border-strong:rgba(255,255,255,.16);
--pi-divider: rgba(255,255,255,.06);
--pi-fg: #F5F7FA;
--pi-fg-muted: rgba(245,247,250,.72);
--pi-fg-subtle: rgba(245,247,250,.52);
--pi-fg-inverse: var(--pi-neutral-900);
--pi-link: #B89BF5;
--pi-link-hover: #D9C7FB;
}
/* ============================================================
SEMANTIC ELEMENT STYLES
============================================================ */
.pi-h1, .pi-display {
font-family: var(--pi-font-display);
font-weight: 900;
font-size: var(--pi-text-5xl);
line-height: var(--pi-leading-tight);
letter-spacing: var(--pi-tracking-tight);
color: var(--pi-fg);
}
.pi-h2 {
font-family: var(--pi-font-display);
font-weight: 800;
font-size: var(--pi-text-3xl);
line-height: var(--pi-leading-snug);
letter-spacing: var(--pi-tracking-tight);
color: var(--pi-fg);
}
.pi-h3 {
font-family: var(--pi-font-display);
font-weight: 700;
font-size: var(--pi-text-2xl);
line-height: var(--pi-leading-snug);
letter-spacing: var(--pi-tracking-snug);
color: var(--pi-fg);
}
.pi-h4 {
font-family: var(--pi-font-ui);
font-weight: 600;
font-size: var(--pi-text-xl);
line-height: var(--pi-leading-snug);
color: var(--pi-fg);
}
.pi-subhead {
font-family: var(--pi-font-ui);
font-weight: 500;
font-size: var(--pi-text-md);
line-height: var(--pi-leading-normal);
color: var(--pi-fg);
}
.pi-eyebrow {
font-family: var(--pi-font-ui);
font-weight: 600;
font-size: var(--pi-text-xs);
letter-spacing: var(--pi-tracking-caps);
text-transform: uppercase;
color: var(--pi-purple-700);
}
.pi-body {
font-family: var(--pi-font-body);
font-weight: 400;
font-size: var(--pi-text-base);
line-height: var(--pi-leading-normal);
color: var(--pi-fg-muted);
}
.pi-body-lg {
font-family: var(--pi-font-body);
font-weight: 400;
font-size: var(--pi-text-md);
line-height: var(--pi-leading-loose);
color: var(--pi-fg-muted);
}
.pi-caption {
font-family: var(--pi-font-body);
font-size: var(--pi-text-sm);
color: var(--pi-fg-subtle);
}
.pi-mono {
font-family: var(--pi-font-mono);
font-size: var(--pi-text-sm);
}
/* Gradient text helper (use sparingly, per brand rules) */
.pi-gradient-text {
background: var(--pi-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* PRO badge — the bordered gradient pill from the wordmark */
.pi-pro-badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--pi-font-display);
font-weight: 500;
letter-spacing: 0.02em;
padding: 2px 10px 3px;
border-radius: 4px;
background: var(--pi-gradient);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
position: relative;
}
.pi-pro-badge::before {
content: "";
position: absolute;
inset: 0;
border-radius: 4px;
padding: 2px;
background: var(--pi-gradient);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}