/* =========================================================================
Partyhat Design System — Core tokens
Colors, type, spacing, radii, elevation.
Apply on or any scoped root.
========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Pixelify+Sans:wght@500;600;700&family=Instrument+Serif:ital@0;1&display=swap');
:root {
/* ---------- BRAND & ACCENT ---------- */
--color-primary: #cb4a1b; /* Deep burnt orange — Dragonfly-style single accent */
--color-primary-hover: #e0561f; /* Lighter on hover */
--color-primary-focus: #f9682b; /* Focus ring tint */
--color-brand-secure: #7a7fad; /* Muted lavender-gray — security surfaces */
--color-on-primary: #ffffff; /* Type on lavender */
/* ---------- SURFACE LADDER (dark) ---------- */
--color-canvas: #010102; /* Page background — near-pure black with a faint blue tint */
--color-surface-1: #0c0d0f; /* Cards, panels, product screenshot frames */
--color-surface-2: #131418; /* Featured / hovered cards */
--color-surface-3: #1a1c20; /* Sub-nav, dropdowns */
--color-surface-4: #21242a; /* bg-level-3 — deepest lift */
--color-hairline: #23252a; /* 1px borders on cards, dividers */
--color-hairline-strong: #2e3036; /* Stronger borders — input focus container */
--color-hairline-tertiary: #3a3d44; /* Tertiary borders for nested surfaces */
/* ---------- INVERSE (rare, white pill CTA contexts) ---------- */
--color-inverse-canvas: #ffffff;
--color-inverse-surface-1: #f4f5f8;
--color-inverse-surface-2: #e9eaef;
--color-inverse-ink: #08090a;
/* ---------- TEXT ---------- */
--color-ink: #f7f8f8; /* Headlines + emphasized body */
--color-ink-muted: #d0d6e0; /* Secondary on hero panels */
--color-ink-subtle: #8a8f98; /* Tertiary — deselected tabs, footer */
--color-ink-tertiary: #62666d; /* Quaternary — disabled, footnotes */
/* ---------- SEMANTIC ---------- */
--color-semantic-success: #27a644; /* Status pills, success indicators */
--color-semantic-overlay: rgba(0,0,0,0.7); /* Modal scrim */
/* ---------- TYPOGRAPHY: families ---------- */
--font-display: 'Inter', 'SF Pro Display', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
--font-text: 'Inter', 'SF Pro Display', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
--font-serif: 'Instrument Serif', 'Georgia', serif;
--font-accent: 'Pixelify Sans', ui-monospace, monospace;
/* ---------- TYPOGRAPHY: scale (size / weight / line-height / tracking) ---------- */
--type-display-xl-size: 80px; --type-display-xl-weight: 600; --type-display-xl-lh: 1.05; --type-display-xl-track: -3.0px;
--type-display-lg-size: 56px; --type-display-lg-weight: 600; --type-display-lg-lh: 1.10; --type-display-lg-track: -1.8px;
--type-display-md-size: 40px; --type-display-md-weight: 600; --type-display-md-lh: 1.15; --type-display-md-track: -1.0px;
--type-headline-size: 28px; --type-headline-weight: 600; --type-headline-lh: 1.20; --type-headline-track: -0.6px;
--type-card-title-size: 22px; --type-card-title-weight: 500; --type-card-title-lh: 1.25; --type-card-title-track: -0.4px;
--type-subhead-size: 20px; --type-subhead-weight: 400; --type-subhead-lh: 1.40; --type-subhead-track: -0.2px;
--type-body-lg-size: 18px; --type-body-lg-weight: 400; --type-body-lg-lh: 1.50; --type-body-lg-track: -0.1px;
--type-body-size: 16px; --type-body-weight: 400; --type-body-lh: 1.50; --type-body-track: -0.05px;
--type-body-sm-size: 14px; --type-body-sm-weight: 400; --type-body-sm-lh: 1.50; --type-body-sm-track: 0;
--type-caption-size: 12px; --type-caption-weight: 400; --type-caption-lh: 1.40; --type-caption-track: 0;
--type-button-size: 14px; --type-button-weight: 500; --type-button-lh: 1.20; --type-button-track: 0;
--type-eyebrow-size: 13px; --type-eyebrow-weight: 500; --type-eyebrow-lh: 1.30; --type-eyebrow-track: 0.4px;
--type-mono-size: 13px; --type-mono-weight: 400; --type-mono-lh: 1.50; --type-mono-track: 0;
/* ---------- SPACING (4px base) ---------- */
--space-xxs: 4px;
--space-xs: 8px;
--space-sm: 12px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-xxl: 48px;
--space-section: 96px;
/* ---------- RADII ---------- */
--radius-xs: 4px; /* small chips, status badges */
--radius-sm: 6px; /* inline tags */
--radius-md: 8px; /* buttons, inputs — DEFAULT for CTAs */
--radius-lg: 12px; /* cards (pricing, feature, testimonial) */
--radius-xl: 16px; /* product screenshot panels */
--radius-xxl: 24px; /* oversized CTA banners (rare) */
--radius-pill: 9999px; /* tab toggles, status pills */
--radius-full: 9999px; /* avatars */
/* ---------- ELEVATION (carried by surface + hairline, not shadow) ---------- */
--elev-1-bg: var(--color-surface-1); --elev-1-border: 1px solid var(--color-hairline);
--elev-2-bg: var(--color-surface-2); --elev-2-border: 1px solid var(--color-hairline-strong);
--elev-3-bg: var(--color-surface-3); --elev-3-border: 1px solid var(--color-hairline-tertiary);
--focus-ring: 2px solid rgba(94, 105, 209, 0.5); /* primary-focus @ 50% */
/* Subtle top-edge highlight on lifted panels — the "pixel rendered" feel */
--edge-highlight-top: inset 0 1px 0 0 rgba(255,255,255,0.04);
/* ---------- LAYOUT ---------- */
--content-max: 1280px;
}
/* =========================================================================
Semantic element styles
Use these on bare …
… inside a scoped wrapper if you want
defaults applied without per-element classes.
========================================================================= */
.ph-root {
background: var(--color-canvas);
color: var(--color-ink);
font-family: var(--font-text);
font-size: var(--type-body-size);
line-height: var(--type-body-lh);
letter-spacing: var(--type-body-track);
font-weight: var(--type-body-weight);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ph-display-xl, .ph-root h1.display {
font-family: var(--font-display);
font-size: var(--type-display-xl-size);
font-weight: var(--type-display-xl-weight);
line-height: var(--type-display-xl-lh);
letter-spacing: var(--type-display-xl-track);
}
.ph-display-lg, .ph-root h1 {
font-family: var(--font-display);
font-size: var(--type-display-lg-size);
font-weight: var(--type-display-lg-weight);
line-height: var(--type-display-lg-lh);
letter-spacing: var(--type-display-lg-track);
}
.ph-display-md, .ph-root h2 {
font-family: var(--font-display);
font-size: var(--type-display-md-size);
font-weight: var(--type-display-md-weight);
line-height: var(--type-display-md-lh);
letter-spacing: var(--type-display-md-track);
}
.ph-headline, .ph-root h3 {
font-family: var(--font-display);
font-size: var(--type-headline-size);
font-weight: var(--type-headline-weight);
line-height: var(--type-headline-lh);
letter-spacing: var(--type-headline-track);
}
.ph-card-title, .ph-root h4 {
font-family: var(--font-display);
font-size: var(--type-card-title-size);
font-weight: var(--type-card-title-weight);
line-height: var(--type-card-title-lh);
letter-spacing: var(--type-card-title-track);
}
.ph-subhead {
font-size: var(--type-subhead-size);
font-weight: var(--type-subhead-weight);
line-height: var(--type-subhead-lh);
letter-spacing: var(--type-subhead-track);
}
.ph-body-lg, .ph-root p.lead {
font-size: var(--type-body-lg-size);
font-weight: var(--type-body-lg-weight);
line-height: var(--type-body-lg-lh);
letter-spacing: var(--type-body-lg-track);
color: var(--color-ink-muted);
}
.ph-body, .ph-root p {
font-size: var(--type-body-size);
line-height: var(--type-body-lh);
letter-spacing: var(--type-body-track);
color: var(--color-ink-muted);
}
.ph-body-sm, .ph-root small {
font-size: var(--type-body-sm-size);
line-height: var(--type-body-sm-lh);
color: var(--color-ink-subtle);
}
.ph-caption {
font-size: var(--type-caption-size);
line-height: var(--type-caption-lh);
color: var(--color-ink-subtle);
}
.ph-eyebrow {
font-size: var(--type-eyebrow-size);
font-weight: var(--type-eyebrow-weight);
line-height: var(--type-eyebrow-lh);
letter-spacing: var(--type-eyebrow-track);
text-transform: none;
color: var(--color-ink-subtle);
}
.ph-mono, .ph-root code {
font-family: var(--font-mono);
font-size: var(--type-mono-size);
line-height: var(--type-mono-lh);
}
.ph-root a {
color: var(--color-primary);
text-decoration: none;
}
.ph-root a:hover { color: var(--color-primary-hover); }
.ph-root a:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: 2px; }