/* portal-kit.css — generated by scripts/copy-theme.mjs. * tokens + 1 component host-CSS block(s). */ /* * Portal Kit — default theme tokens. * * Every component reads these custom properties. Products override * any subset on `:root` to apply their brand. See docs/Theming.md. * * Naming convention: --pk-{category}-{role}-{state?}. */ :root { /* ─── Surface ───────────────────────────────────────────────────── */ --pk-color-bg: #F6F4EE; --pk-color-bg-elevated: #FFFFFF; --pk-color-bg-sunken: #FBFAF5; --pk-color-border: #ECE8DA; --pk-color-border-strong: #D6D2C4; /* ─── Text ──────────────────────────────────────────────────────── */ --pk-color-text: #181B22; --pk-color-text-muted: rgba(24,27,34,0.65); --pk-color-text-inverse: #F6F4EE; /* ─── Primary (products override) ──────────────────────────────── */ --pk-color-primary: #0E7C7B; --pk-color-primary-hi: #15A09F; --pk-color-primary-ink: #FFFFFF; /* ─── Accent (products override) ───────────────────────────────── */ --pk-color-accent: #F4A261; /* ─── Status ────────────────────────────────────────────────────── */ --pk-color-success: #2A7E4F; --pk-color-warn: #C77E07; --pk-color-danger: #A23131; --pk-color-danger-bg: #FDECEC; /* ─── Hero / auth backdrop ─────────────────────────────────────── */ --pk-color-hero-bg: #0E1A26; --pk-color-hero-text: var(--pk-color-text-inverse); /* ─── Typography ───────────────────────────────────────────────── */ --pk-font-family: 'Segoe UI', Tahoma, Arial, Helvetica, sans-serif; --pk-font-family-mono: 'Consolas', 'Menlo', 'Courier New', monospace; --pk-font-size-xs: 0.72rem; --pk-font-size-sm: 0.85rem; --pk-font-size-base: 0.95rem; --pk-font-size-md: 1.05rem; --pk-font-size-lg: 1.15rem; --pk-font-size-h2: 1.25rem; --pk-font-size-h1: clamp(1.5rem, 2.6vw, 1.85rem); --pk-font-weight-normal: 400; --pk-font-weight-medium: 500; --pk-font-weight-bold: 700; --pk-font-weight-display: 800; --pk-letter-spacing-eyebrow: 0.18em; --pk-line-height-body: 1.55; --pk-line-height-tight: 1.15; /* ─── Spacing ──────────────────────────────────────────────────── */ --pk-space-1: 0.25rem; --pk-space-2: 0.4rem; --pk-space-3: 0.6rem; --pk-space-4: 0.85rem; --pk-space-5: 1rem; --pk-space-6: 1.4rem; --pk-space-7: 2rem; --pk-space-8: 2.5rem; /* ─── Radius / shadow / motion ─────────────────────────────────── */ --pk-radius-sm: 6px; --pk-radius-md: 8px; --pk-radius-lg: 12px; --pk-radius-pill: 9999px; --pk-shadow-card: 0 8px 22px rgba(24,27,34,0.10); --pk-shadow-modal: 0 30px 70px rgba(0,0,0,0.35), 0 8px 22px rgba(24,27,34,0.25); --pk-shadow-focus: 0 0 0 3px rgba(14,124,123,0.18); --pk-motion-fast: 0.08s ease; --pk-motion-base: 0.12s ease; --pk-motion-slow: 0.25s ease; } @media (prefers-reduced-motion: reduce) { :root { --pk-motion-fast: 0s; --pk-motion-base: 0s; --pk-motion-slow: 0s; } } /* ─── Dark mode ──────────────────────────────────────────────────────── * Two activation paths: * 1. `data-pk-theme="dark"` on or — explicit, host-controlled * 2. `@media (prefers-color-scheme: dark)` when the host hasn't set a * data-pk-theme attribute — respects OS preference by default. * * Hosts can opt out of OS-driven switching with `data-pk-theme="light"`. */ :root[data-pk-theme="dark"], :root[data-pk-theme="dark"] :host { --pk-color-bg: #11141B; --pk-color-bg-elevated: #1A1F2A; --pk-color-bg-sunken: #0D1017; --pk-color-border: #2A3140; --pk-color-border-strong: #3A4254; --pk-color-text: #E8E6DD; --pk-color-text-muted: rgba(232,230,221,0.62); --pk-color-text-inverse: #181B22; --pk-color-primary-ink: #FFFFFF; --pk-color-danger-bg: #3A1818; --pk-color-hero-bg: #060A12; --pk-color-hero-text: var(--pk-color-text); --pk-shadow-card: 0 8px 22px rgba(0,0,0,0.45); --pk-shadow-modal: 0 30px 70px rgba(0,0,0,0.65), 0 8px 22px rgba(0,0,0,0.45); --pk-shadow-focus: 0 0 0 3px rgba(21,160,159,0.35); } @media (prefers-color-scheme: dark) { :root:not([data-pk-theme]), :root:not([data-pk-theme]) :host { --pk-color-bg: #11141B; --pk-color-bg-elevated: #1A1F2A; --pk-color-bg-sunken: #0D1017; --pk-color-border: #2A3140; --pk-color-border-strong: #3A4254; --pk-color-text: #E8E6DD; --pk-color-text-muted: rgba(232,230,221,0.62); --pk-color-text-inverse: #181B22; --pk-color-primary-ink: #FFFFFF; --pk-color-danger-bg: #3A1818; --pk-color-hero-bg: #060A12; --pk-color-hero-text: var(--pk-color-text); --pk-shadow-card: 0 8px 22px rgba(0,0,0,0.45); --pk-shadow-modal: 0 30px 70px rgba(0,0,0,0.65), 0 8px 22px rgba(0,0,0,0.45); --pk-shadow-focus: 0 0 0 3px rgba(21,160,159,0.35); } } /* === light-DOM rules from /src/components/pk-sidebar/pk-sidebar.host.css === */ /* * pk-sidebar — light-DOM styling for slotted descendants. * * ::slotted() can only target direct slot children, so the kit's shadow CSS * can't reach anchors nested inside