/* ──────────────────────────────────────────────────────────────────────── POST OS STUDIO — Design Tokens Single source of truth. Reference STYLES.md. Imported on every page via . Never override these in component CSS; instead, reference them via var(--token-name). ──────────────────────────────────────────────────────────────────────── */ :root { /* ── Brand color ─────────────────────────────────────────────────── */ --red: #FF4D00; --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); /* ── Surfaces — v1 port ─── */ --bg: #000000; /* main content area — pure black */ --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 ─────────────────────────────────────────────────────── */ --border-dark: #1a1a1a; --border-input: #1e1e1e; --border: rgba(255,255,255,0.10); --border-divider: rgba(255,255,255,0.07); --focus-border: var(--red); /* ── Text (always white at varying opacity) ──────────────────────── */ --text-1: rgba(255,255,255,0.88); /* primary */ --text-2: rgba(255,255,255,0.55); /* section labels */ --text-3: rgba(255,255,255,0.35); /* muted */ --text-desc: rgba(255,255,255,0.50); /* descriptions */ --text-tag: rgba(255,255,255,0.25); /* tag labels */ --text-meta: rgba(255,255,255,0.30); /* timestamps/meta */ --text-on-red: #ffffff; /* ── Badge / app accent colors ───────────────────────────────────── */ --badge-mini: #FCCC06; --badge-postos: #FF4D00; --badge-movieos: #D02329; --badge-score: #D02329; --badge-brain: #f0ede8; --badge-train: #f0ede8; --badge-neutral: #f0ede8; /* ── Typography ──────────────────────────────────────────────────── */ --font-display: 'CarbonPlus', sans-serif; --font-body: 'Switzer', 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: 9px; --fs-pill: clamp(8px, 0.68vw, 10px); --fs-small: 9px; --fs-meta: clamp(10px, 0.65vw, 11px); --fs-button: 10px; /* 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 — matches v1 (legacy/studio.html ~99-165) exactly ──── */ /* Grey canvas, white panels floating on it (macOS convention). */ html[data-theme="light"] { /* Surfaces */ --bg: #f5f5f5; --bg-raised: #ffffff; --bg-elevated: #f5f5f5; --bg-overlay: rgba(0,0,0,0.04); --surface-1: #ffffff; --surface-2: #ffffff; --surface-3: #f5f5f5; /* Borders */ --border: #e4e4e4; --border-dark: #e4e4e4; --border-input: #e4e4e4; --border-divider: rgba(0,0,0,0.06); --focus-border: rgba(0,0,0,0.22); /* Text — charcoal not pure black so chat messages and system text read as inviting, not stark. #0f0f0f was pulling everything toward bookish/clinical. #2a2a2a is the modern charcoal sweet spot. */ --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%; }