/* ──────────────────────────────────────────────────────────────────────── POST OS STUDIO — Design Tokens Single source of truth, mirrored from design-laws/styles.css (the Claude Design system project) per design-laws/12-IMPLEMENTATION-CONTRACT. Imported on every page via . Never override these in component CSS; instead, reference them via var(--token-name). ──────────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600&display=swap'); :root { /* ── Brand color ─────────────────────────────────────────────────── */ --red: #FF4D00; /* Action Orange — portal working accent */ --red-soft: rgba(255, 77, 0, 0.06); --red-soft-2: rgba(255, 77, 0, 0.03); --red-border-15: rgba(255, 77, 0, 0.15); --red-border-40: rgba(255, 77, 0, 0.40); /* ── Canonical palette (design-laws/styles.css — mirror verbatim) ── */ --marquee: #C8102E; /* Marquee Red */ --cream: #EEE8E1; /* Projection Cream */ --amber: #A99360; --te-orange: #FF4E00; /* KO2 working orange (patterns 11) */ --led-red: #FF3B23; /* LED logic: failures / expiry / overdue */ --display-pink: #FF3E8E; /* display accents — dark screens only */ --signal-blue: #3E9EF4; /* LED logic: system info */ --wu-yellow: #FFD500; --chassis: #D8D6D2; /* hardware neutrals */ --grille: #A8A6A2; --keycap-grey: #7B7975; --keycap-black: #1C1C1E; /* ── Surfaces — v1 port ─── */ --bg: #000000; /* main content area — pure black */ --input-well: #0c0c0e; /* composer/input interiors (canon edit bar) */ --bg-raised: #111111; /* sidebar, panel, cards — dark grey */ --bg-elevated: #1a1a1a; /* modals, dropdowns, inputs */ --surface-1: #111111; /* alias for bg-raised */ --surface-2: #1a1a1a; /* alias for bg-elevated */ --surface-3: #181818; /* pills, inputs */ /* ── Canonical button spec — single source of truth ─────────────── SECONDARY (utility, e.g. Sign Out, lesson Prev/Complete, app cards): background : var(--bg-raised) color : var(--text-1) border : 1px solid var(--border) border-radius : 5px font-family : 'CarbonPlus', sans-serif font-size : 11px letter-spacing: 0.18em text-transform: uppercase hover : border-color rgba(255,77,0,0.4); color var(--red) PRIMARY (CTA, e.g. Subscribe Now, Sign In, Next Lesson): background : var(--red) color : #fff border : 1px solid var(--red) (or none) same typography as secondary hover : opacity 0.88 ────────────────────────────────────────────────────────────── */ /* ── Borders — canonical hairline #2a2a2a (design-laws/12) ───────── */ --border-dark: #1a1a1a; --border-input: #1e1e1e; --border: #2a2a2a; --border-divider: #1f1f1f; --focus-border: var(--red); /* ── Text — canonical warm solids (design-laws/styles.css) ───────── */ --text-1: #f2efe8; /* primary */ --text-2: #b5b0a8; /* section labels */ --text-3: #7a766f; /* muted */ --text-desc: #b5b0a8; /* descriptions */ --text-tag: #7a766f; /* tag labels */ --text-meta: #7a766f; /* timestamps/meta */ --text-on-red: #ffffff; /* ── Interaction states (defined in BOTH themes — layout.css uses) ── */ --hover: rgba(255,255,255,0.04); --active: rgba(255,255,255,0.06); --track: rgba(255,255,255,0.10); /* ── Badge / app accent colors — THE DOT GRAMMAR accents (law 13, ratified 2026-08-13): Wu Yellow the boost · TE Orange the carousel engine · Marquee Red cinema · Amber = Score (absorbed Music; LED Red returns to the pool) · Brain = the white keycap, never recolors. ─────────────────────────────────────────────────────── */ --badge-mini: #FFD500; --badge-postos: #FF4E00; --badge-movieos: #C8102E; --badge-score: #A99360; --badge-brain: #ffffff; --badge-train: #f0ede8; --badge-neutral: #f0ede8; /* ── Typography (canonical stacks — design-laws/01) ──────────────── */ --font-display: 'CarbonPlus', 'Space Grotesk', Arial, sans-serif; --font-body: 'Inter Tight', 'Switzer', 'Inter', Arial, sans-serif; /* canonical body — design-laws/01 */ --font-condensed: 'Champion Featherweight', 'Anton', Arial, sans-serif; --font-poster: 'HeadingsNow', 'HeadingNow', 'Heading Now', 'Champion Featherweight', 'Anton', Arial, sans-serif; --font-wide: 'Panchang', 'Space Grotesk', Arial, sans-serif; --font-hero: 'Switzer', Arial, sans-serif; /* Sizes */ --fs-hero-title: clamp(28px, 3vw, 40px); --fs-page-title: 14px; --fs-section-label: clamp(12px, 0.7vw, 12px); --fs-card-title: clamp(16px, 0.9vw, 16px); --fs-card-desc: clamp(12px, 0.75vw, 12px); --fs-body: 14px; --fs-body-sm: 13px; --fs-body-lg: 15px; --fs-tag: 10px; /* size revamp 2026-07-19 */ --fs-pill: clamp(11px, 0.8vw, 13px); --fs-small: 10px; --fs-meta: clamp(11px, 0.7vw, 12px); --fs-button: 12px; /* was 10px — JT 2026-06-12: button labels too small portal-wide */ /* Letter spacing */ --ls-section-label: 0.28em; --ls-card-title: 0.18em; --ls-card-desc: 0.05em; --ls-tag: 0.22em; --ls-pill: 0.10em; --ls-button: 0.16em; --ls-meta: 0.05em; /* ── Spacing (always clamp) ──────────────────────────────────────── */ --pad-page: clamp(16px, 1.5vw, 24px); --pad-card-y: clamp(12px, 1.1vw, 18px); --pad-card-x: clamp(14px, 1.3vw, 20px); --gap-section: clamp(14px, 1.4vw, 24px); --gap-card: 16px; --gap-pill: 5px; /* ── Radii ───────────────────────────────────────────────────────── */ --radius-card: 5px; --radius-input: 3px; --radius-button: 3px; --radius-button-ghost: 4px; --radius-pill: 3px; --radius-drop: 6px; --radius-nav-badge-sb: 7px; --radius-nav-badge-content: 6px; /* ── Z-index scale (single source — no more guessing) ────────────── */ --z-sticky-nav: 100; --z-sidebar: 200; --z-toast: 500; --z-modal-backdrop: 9000; --z-modal-content: 9001; --z-tooltip: 10000; /* ── Motion ──────────────────────────────────────────────────────── */ --t-fast: 0.15s; --t-base: 0.20s; --t-slow: 0.30s; --easing: cubic-bezier(0.4, 0, 0.2, 1); } /* ── LIGHT MODE — the shipped light grey (v1/SCORE lineage) ────────── */ /* JT 2026-08-03: the boards' warm #f4f2ee chassis is NOT ratified for the portal shell — the light grey stays until JT + Claude Design settle it. (The warm mapping lives in design-laws/11 if ratified.) */ html[data-theme="light"] { /* Surfaces — THE ONE-GREY LAW (JT 2026-08-13: "harmonize EVERYWHERE"): the light chassis is the CANON SPINE verbatim (PORT_CONTRACT table: bg #f2f2f3 · raised #fff · elevated #ececee · border #e0e0e3). The old #f5f5f5/#e4e4e4 drifted a few points from every ported canon surface, which is exactly how two near-identical greys ended up on one screen. */ --bg: #f2f2f3; --input-well: #f2f2f3; /* input interiors = the field grey, ONE grey */ --bg-raised: #ffffff; --bg-elevated: #ececee; --bg-overlay: rgba(0,0,0,0.04); --surface-1: #ffffff; --surface-2: #ececee; --surface-3: #f2f2f3; /* Borders */ --border: #e0e0e3; --border-dark: #e0e0e3; --border-input: #e0e0e3; --border-divider: rgba(0,0,0,0.06); --focus-border: rgba(0,0,0,0.22); /* Text — charcoal, the shipped light ink */ --text-1: #2a2a2a; --text-2: #4a4a4a; --text-3: #8a8a8a; --text-desc: #4a4a4a; --text-tag: #8a8a8a; --text-meta: #8a8a8a; /* Interactive */ --hover: rgba(0,0,0,0.03); --active: rgba(0,0,0,0.05); --track: rgba(0,0,0,0.08); /* Cream — same value as dark mode. Was #ffffff which made Brain's badge disappear into white card backgrounds (right-rail Apps list, course-page app links). The cream reads as a neutral "warm" surface in both themes — matches the sidebar's Brain badge in light mode. */ --badge-neutral: #f0ede8; /* Hero / logo */ --logo-text-color: #3a3a3a; /* Legacy aliases (kept in sync with v1) */ --border-light: #e4e4e4; --white-88: #0f0f0f; --white-38: #4a4a4a; --white-12: rgba(0,0,0,0.05); } /* ── Body reset / global defaults ──────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text-1); font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } img, video, iframe { display: block; max-width: 100%; } /* ── Control-row metrics (design-laws/09-CONTROL-ROWS) — theme-agnostic ── */ :root { --h-primary: 42px; /* filled CTA — one per bar, leftmost */ --h-task: 38px; /* labeled task buttons, search, segments */ --h-utility: 34px; /* app-bar icon utilities */ --h-chip: 26px; /* filter chips */ --gap-cluster: 8px; /* inside a cluster */ --gap-between: 20px; /* between clusters */ }