/* platform.css — the universal theme, served centrally by platform-api at /platform.css (one copy for every site, mirrors /analytics.js). ADR 008 pattern. THE design system is the jameslcowan system (Apple neutral palette, SF Pro stacks, --theme-* semantic layer with system light/dark + data-theme override, accent scale, spacing/radius/motion/blur/tracking). Its single source of truth is sites/jameslcowan/design/tokens.json; that repo's build generates static/tokens.css, and scripts/sync-platform-theme.mjs copies it verbatim into the marked block below. Never hand-edit inside the markers. Three cascade layers, low to high: platform.reset — box model, margin, media, form normalization platform.tokens — the jameslcowan token set (synced) + platform additions (z-index, safe-area) + a legacy compat block kept until every site is converted off the old panax-era names. platform.interaction — the global transparent-interaction fixes (tap highlight, touch delay, text-size-adjust, focus ring, reduced motion) applied ONCE instead of per-element. Everything here is layered. A site's own (unlayered) CSS always beats a layered rule, so this is a floor other stylesheets build on, never a ceiling that fights them. Sites override the accent slot (--accent-*) with their brand hue. Load it FIRST in , before any site stylesheet. */ @layer platform.reset, platform.tokens, platform.interaction; /* ---------------------------------------------------------------- reset ---- */ @layer platform.reset { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; } body { margin: 0; min-height: 100svh; } /* Remove default margins; sites set their own rhythm via the spacing scale. */ h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } /* Media behaves like a block that never overflows its column. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; max-width: 100%; } img, video { height: auto; } /* Forms inherit type; buttons look like buttons only when a site says so. */ input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; text-decoration: inherit; } /* Predictable text wrapping for headings and prose. */ h1, h2, h3, h4 { text-wrap: balance; } p, li { text-wrap: pretty; } } /* --------------------------------------------------------------- tokens ---- */ @layer platform.tokens { /* BEGIN jameslcowan-tokens (synced by scripts/sync-platform-theme.mjs; do not hand-edit) */ /* Generated from design/tokens.json - do not edit manually */ /* Pantone 2026: System blue (vivid) + Apple neutral (custom) */ :root { color-scheme: light dark; /* Accent scale */ --accent-50: #EBF4FF; --accent-100: #D6EAFF; --accent-200: #A8D4FF; --accent-300: #6BB5FF; --accent-400: #3399FF; --accent-500: #0A84FF; --accent-600: #006FE6; --accent-700: #0059C2; --accent-800: #004099; --accent-900: #002E6E; --accent-950: #001A42; /* Light theme */ --light-bg: #FFFFFF; --light-bg-subtle: #F5F5F7; --light-bg-elevated: #FFFFFF; --light-bg-raised: #EFEFF4; --light-bg-surface: #E8E8ED; --light-bg-muted: #DCDCE2; --light-bg-soft: #C7C7CC; --light-bg-strong: #AEAEB2; --light-bg-emphasis: #8E8E93; --light-bg-trans-tint: #FFFFFF; --light-bg-trans-light: #F5F5F7; --light-bg-trans: #EFEFF4; --light-bg-trans-dark: #E8E8ED; --light-color: #1D1D1F; --light-color-dim: #6E6E73; --light-color-muted: #86868B; --light-border: #D2D2D7; --light-border-nav: #DFDFDF; --light-border-strong: #AEAEB2; --light-border-accent: #0A84FF; /* Dark theme */ --dark-bg: #000000; --dark-bg-subtle: #1C1C1E; --dark-bg-elevated: #2C2C2E; --dark-bg-raised: #3A3A3C; --dark-bg-surface: #48484A; --dark-bg-muted: #636366; --dark-bg-soft: #8E8E93; --dark-bg-strong: #AEAEB2; --dark-bg-emphasis: #C7C7CC; --dark-bg-trans-tint: #000000; --dark-bg-trans-light: #1C1C1E; --dark-bg-trans: #2C2C2E; --dark-bg-trans-dark: #3A3A3C; --dark-color: #F5F5F7; --dark-color-dim: #98989D; --dark-color-muted: #AEAEB2; --dark-border: #38383A; --dark-border-nav: #202020; --dark-border-strong: #48484A; --dark-border-accent: #3399FF; /* Typography */ --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.0625rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --leading-tight: 1.2; --leading-normal: 1.47; --leading-relaxed: 1.6; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --tracking-tight: -0.022em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.06em; --tracking-widest: 0.12em; /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; /* Radius */ --radius-2xs: 2px; --radius-xs: 4px; --radius-sm: 6px; --radius-chip: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 24px; --radius-tile: 22.37%; /* Motion */ --motion-duration-short-1: 50ms; --motion-duration-short-2: 100ms; --motion-duration-short-3: 150ms; --motion-duration-short-4: 200ms; --motion-duration-medium-1: 250ms; --motion-duration-medium-2: 300ms; --motion-duration-medium-3: 350ms; --motion-duration-medium-4: 400ms; --motion-duration-long-1: 450ms; --motion-duration-long-2: 500ms; --motion-duration-long-3: 550ms; --motion-duration-long-4: 600ms; --motion-duration-extra-long-1: 700ms; --motion-duration-extra-long-2: 800ms; --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1); --motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1); --motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); --motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); --motion-press: var(--motion-duration-short-2) var(--motion-easing-standard); --motion-hover: var(--motion-duration-short-3) var(--motion-easing-standard); --motion-state: var(--motion-duration-medium-1) var(--motion-easing-standard); --motion-enter: var(--motion-duration-short-4) var(--motion-easing-emphasized-decelerate); --motion-exit: var(--motion-duration-short-3) var(--motion-easing-emphasized-accelerate); --motion-sheet: var(--motion-duration-medium-4) var(--motion-easing-emphasized-decelerate); --motion-sheet-exit: var(--motion-duration-medium-1) var(--motion-easing-emphasized-accelerate); --motion-fast: var(--motion-hover); --motion-normal: var(--motion-state); --motion-slow: var(--motion-duration-medium-2) var(--motion-easing-standard); /* Blur */ --blur-xs: 8px; --blur-sm: 12px; --blur-md: 20px; --blur-lg: 28px; --blur: 20px; /* Icon sizes (from iconify-icon.pl-icon and --pl-profile-section-icon-size) */ --icon-size-inline: 1.25em; --icon-size-section: 1.75rem; } /* Active theme (html[data-theme] overrides system preference) */ :root { --theme-bg: var(--light-bg); --theme-bg-subtle: var(--light-bg-subtle); --theme-bg-elevated: var(--light-bg-elevated); --theme-bg-raised: var(--light-bg-raised); --theme-bg-surface: var(--light-bg-surface); --theme-bg-muted: var(--light-bg-muted); --theme-bg-soft: var(--light-bg-soft); --theme-bg-strong: var(--light-bg-strong); --theme-color: var(--light-color); --theme-color-dim: var(--light-color-dim); --theme-color-muted: var(--light-color-muted); --theme-border: var(--light-border); --theme-border-nav: var(--light-border-nav); --theme-border-strong: var(--light-border-strong); --theme-border-card: var(--light-border); --theme-accent-emphasis: var(--accent-500); --theme-focus-ring: rgba(10, 132, 255, 0.32); --theme-shadow-sm: rgba(11, 20, 31, 0.08); --theme-shadow-md: rgba(11, 20, 31, 0.12); --theme-shadow-lg: rgba(11, 20, 31, 0.16); --theme-nav-blur: var(--blur-lg); --theme-shell-bg: transparent; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --theme-bg: var(--dark-bg); --theme-bg-subtle: var(--dark-bg-subtle); --theme-bg-elevated: var(--dark-bg-elevated); --theme-bg-raised: var(--dark-bg-raised); --theme-bg-surface: var(--dark-bg-surface); --theme-bg-muted: var(--dark-bg-muted); --theme-bg-soft: var(--dark-bg-soft); --theme-bg-strong: var(--dark-bg-strong); --theme-color: var(--dark-color); --theme-color-dim: var(--dark-color-dim); --theme-color-muted: var(--dark-color-muted); --theme-border: var(--dark-border); --theme-border-nav: var(--dark-border-nav); --theme-border-strong: var(--dark-border-strong); --theme-border-card: var(--dark-border-accent); --theme-accent-emphasis: var(--accent-400); --theme-focus-ring: rgba(51, 153, 255, 0.42); --theme-shadow-sm: rgba(0, 0, 0, 0.35); --theme-shadow-md: rgba(0, 0, 0, 0.45); --theme-shadow-lg: rgba(0, 0, 0, 0.55); --theme-nav-blur: var(--blur-xs); --theme-shell-bg: var(--dark-bg); } } :root[data-theme="dark"] { --theme-bg: var(--dark-bg); --theme-bg-subtle: var(--dark-bg-subtle); --theme-bg-elevated: var(--dark-bg-elevated); --theme-bg-raised: var(--dark-bg-raised); --theme-bg-surface: var(--dark-bg-surface); --theme-bg-muted: var(--dark-bg-muted); --theme-bg-soft: var(--dark-bg-soft); --theme-bg-strong: var(--dark-bg-strong); --theme-color: var(--dark-color); --theme-color-dim: var(--dark-color-dim); --theme-color-muted: var(--dark-color-muted); --theme-border: var(--dark-border); --theme-border-nav: var(--dark-border-nav); --theme-border-strong: var(--dark-border-strong); --theme-border-card: var(--dark-border-accent); --theme-accent-emphasis: var(--accent-400); --theme-focus-ring: rgba(51, 153, 255, 0.42); --theme-shadow-sm: rgba(0, 0, 0, 0.35); --theme-shadow-md: rgba(0, 0, 0, 0.45); --theme-shadow-lg: rgba(0, 0, 0, 0.55); --theme-nav-blur: var(--blur-xs); --theme-shell-bg: var(--dark-bg); } :root[data-theme="light"] { --theme-bg: var(--light-bg); --theme-bg-subtle: var(--light-bg-subtle); --theme-bg-elevated: var(--light-bg-elevated); --theme-bg-raised: var(--light-bg-raised); --theme-bg-surface: var(--light-bg-surface); --theme-bg-muted: var(--light-bg-muted); --theme-bg-soft: var(--light-bg-soft); --theme-bg-strong: var(--light-bg-strong); --theme-color: var(--light-color); --theme-color-dim: var(--light-color-dim); --theme-color-muted: var(--light-color-muted); --theme-border: var(--light-border); --theme-border-nav: var(--light-border-nav); --theme-border-strong: var(--light-border-strong); --theme-border-card: var(--light-border); --theme-accent-emphasis: var(--accent-500); --theme-focus-ring: rgba(10, 132, 255, 0.32); --theme-shadow-sm: rgba(11, 20, 31, 0.08); --theme-shadow-md: rgba(11, 20, 31, 0.12); --theme-shadow-lg: rgba(11, 20, 31, 0.16); --theme-nav-blur: var(--blur-lg); --theme-shell-bg: transparent; } /* END jameslcowan-tokens */ /* Platform additions the jameslcowan set does not carry. */ :root { /* Stacking order — shared so headers/menus/modals never collide */ --z-base: 1; --z-header: 100; --z-menu: 200; --z-overlay: 500; --z-modal: 1000; --z-toast: 1500; /* Safe-area insets (notches / home indicators) */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --tap-highlight: transparent; } /* LEGACY COMPAT — panax-era structural names still consumed by site CSS. Values unchanged from before the jameslcowan adoption so unconverted pages render identically. Remove each alias once no site references it. */ :root { --radius: 12px; --radius2: 8px; --radius-pill: 999px; --space-1: 6px; --space-2: 10px; --space-3: 14px; --space-4: 20px; --space-5: 28px; --space-6: 36px; --space-7: 48px; --space-8: 64px; --text-md: 1.0625rem; --leading-body: 1.65; --prose-gap: var(--space-4); --prose-gap-lg: var(--space-5); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --focus-ring: var(--theme-focus-ring, color-mix(in srgb, currentColor 40%, transparent)); } } /* ---------------------------------------------------------- interaction ---- */ @layer platform.interaction { /* The universal transparent-interaction fix, in ONE place instead of ~40 per-element copies. No grey/blue flash on tap; no 300ms delay or double-tap zoom on controls; no accidental text selection dragging a button. */ html { -webkit-tap-highlight-color: var(--tap-highlight, transparent); } a, button, label, summary, select, [role="button"], [role="tab"], [role="menuitem"], [tabindex] { -webkit-tap-highlight-color: var(--tap-highlight, transparent); touch-action: manipulation; } button, summary, [role="button"], [role="tab"] { -webkit-user-select: none; user-select: none; } /* Disabled controls read as disabled everywhere. */ :disabled, [aria-disabled="true"] { cursor: not-allowed; } /* Keyboard focus is always visible; pointer focus never leaves a stuck ring. */ :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: 2px solid var(--theme-focus-ring, currentColor); outline-offset: 2px; border-radius: var(--radius-sm, 6px); } /* Respect users who ask for less motion. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } }