/* ========================================================================== jb-playbook — semantic tokens Intent-level tokens, light + dark. Three rings: primitive (tokens.primitive.css) → semantic (this file) → component alias Components reference SEMANTIC and COMPONENT-ALIAS tokens only. Dark theme applies two ways: 1. Manual: [data-theme="dark"] on (set by the theme toggle) 2. System: prefers-color-scheme, unless the user manually chose light Manual choice beats system. Clearing data-theme returns to system. The dark block is duplicated across the two selectors on purpose — no preprocessor in this stack, and CSS can't share a block between a media query and a selector without nesting (which we avoid for maximum host compatibility). Edit both copies together. Regenerated 2026-07-05. ========================================================================== */ :root { /* ---- Surfaces ---------------------------------------------------------- */ --jb-surface-page: var(--jb-neutral-50); --jb-surface-raised: var(--jb-neutral-0); --jb-surface-sunken: var(--jb-neutral-100); --jb-surface-overlay: var(--jb-neutral-0); /* Soft radial glow at top of page — 5% accent, fades to nothing. Registers as warmth, not decoration. */ --jb-page-glow: radial-gradient( 1100px 460px at 50% -120px, color-mix(in oklab, var(--jb-red-500) 5%, transparent), transparent 72%); /* ---- Text -------------------------------------------------------------- */ --jb-text-primary: var(--jb-neutral-900); --jb-text-secondary: var(--jb-neutral-700); --jb-text-muted: var(--jb-neutral-500); --jb-text-faint: var(--jb-neutral-400); --jb-text-on-accent: #FFFFFF; /* ---- Borders ----------------------------------------------------------- */ --jb-border-subtle: var(--jb-neutral-150); --jb-border-default: var(--jb-neutral-200); --jb-border-strong: var(--jb-neutral-300); /* ---- Accent ------------------------------------------------------------ */ --jb-color-accent: var(--jb-red-500); --jb-color-accent-strong: var(--jb-red-600); --jb-color-accent-soft: var(--jb-red-50); --jb-color-danger: var(--jb-red-700); --jb-color-danger-soft: color-mix(in oklab, var(--jb-red-700) 7%, var(--jb-surface-raised)); /* ---- Links / focus / selection ----------------------------------------- */ --jb-link: var(--jb-color-accent-strong); --jb-link-hover: var(--jb-red-700); --jb-link-underline: var(--jb-red-200); --jb-focus-ring: var(--jb-red-500); --jb-selection-bg: var(--jb-red-100); /* ---- Shadows ------------------------------------------------------------ */ --jb-elevation-sm: var(--jb-shadow-sm); --jb-elevation-md: var(--jb-shadow-md); --jb-elevation-lg: var(--jb-shadow-lg); /* ---- Skeleton ----------------------------------------------------------- */ --jb-skeleton-base: var(--jb-neutral-150); --jb-skeleton-sheen: var(--jb-neutral-100); /* ---- Code surfaces ------------------------------------------------------ */ --jb-code-bg: var(--jb-neutral-100); --jb-code-text: var(--jb-neutral-850); --jb-code-ln: var(--jb-neutral-400); --jb-code-gutter-border: var(--jb-neutral-200); --jb-code-line-highlight: color-mix(in oklab, var(--jb-red-500) 6%, transparent); /* ---- Syntax (restrained, editorial; keyword ties to brand) -------------- */ --jb-syntax-keyword: #B01830; --jb-syntax-string: var(--jb-green-500); --jb-syntax-number: var(--jb-amber-700); --jb-syntax-comment: var(--jb-neutral-500); --jb-syntax-type: var(--jb-violet-500); --jb-syntax-function: var(--jb-blue-700); --jb-syntax-operator: var(--jb-neutral-700); --jb-syntax-punctuation: var(--jb-neutral-500); --jb-syntax-annotation: var(--jb-amber-500); /* ---- Callouts (five variants) ------------------------------------------- */ --jb-callout-note-bg: var(--jb-neutral-100); --jb-callout-note-border: var(--jb-neutral-200); --jb-callout-note-accent: var(--jb-neutral-600); --jb-callout-tip-bg: color-mix(in oklab, var(--jb-green-500) 6%, var(--jb-surface-raised)); --jb-callout-tip-border: var(--jb-green-100); --jb-callout-tip-accent: var(--jb-green-500); --jb-callout-info-bg: color-mix(in oklab, var(--jb-blue-500) 6%, var(--jb-surface-raised)); --jb-callout-info-border: var(--jb-blue-100); --jb-callout-info-accent: var(--jb-blue-500); --jb-callout-warn-bg: color-mix(in oklab, var(--jb-amber-500) 8%, var(--jb-surface-raised)); --jb-callout-warn-border: var(--jb-amber-100); --jb-callout-warn-accent: var(--jb-amber-700); /* Danger uses red 700, NOT the brand red — deeper, reads as related but distinct so the "Avoid this" callout never fights brand accents nearby. */ --jb-callout-danger-bg: var(--jb-color-danger-soft); --jb-callout-danger-border: color-mix(in oklab, var(--jb-red-700) 25%, var(--jb-surface-raised)); --jb-callout-danger-accent: var(--jb-red-700); /* ========================================================================= Component aliases. A Thinkific theme overrides ONE of these to retheme a single component surface, or overrides --jb-color-accent to retheme the whole brand. Components reference these, never primitives. ========================================================================= */ /* Code Display */ --jb-code-display-bg: var(--jb-code-bg); --jb-code-display-border: var(--jb-border-subtle); --jb-code-display-pointer-bg: var(--jb-surface-raised); --jb-code-display-pointer-border: var(--jb-border-default); --jb-code-display-pointer-arrow: var(--jb-border-strong); --jb-code-display-fn-marker: var(--jb-color-accent); --jb-code-display-clickable-underline: color-mix(in oklab, var(--jb-color-accent) 55%, transparent); --jb-code-display-clickable-bg: color-mix(in oklab, var(--jb-color-accent) 7%, transparent); --jb-code-display-clickable-hover-bg: color-mix(in oklab, var(--jb-color-accent) 14%, transparent); --jb-code-display-popup-bg: var(--jb-surface-overlay); --jb-code-display-popup-border: var(--jb-border-default); /* Code Stepper */ --jb-stepper-bg: var(--jb-surface-raised); --jb-stepper-border: var(--jb-border-subtle); --jb-stepper-indicator-active: var(--jb-color-accent); --jb-stepper-indicator-inactive: var(--jb-border-strong); --jb-stepper-btn-bg: transparent; --jb-stepper-btn-text: var(--jb-text-secondary); --jb-stepper-btn-border: var(--jb-border-default); --jb-stepper-btn-hover-bg: var(--jb-surface-sunken); } /* ========================================================================== DARK — manual ([data-theme="dark"]). Keep in sync with the media block. ========================================================================== */ [data-theme="dark"] { --jb-surface-page: var(--jb-neutral-950); --jb-surface-raised: var(--jb-neutral-925); --jb-surface-sunken: var(--jb-neutral-900); --jb-surface-overlay: var(--jb-neutral-900); --jb-page-glow: radial-gradient( 1100px 460px at 50% -120px, color-mix(in oklab, var(--jb-red-400) 7%, transparent), transparent 72%); --jb-text-primary: #EDE9E0; --jb-text-secondary: #B5AFA2; --jb-text-muted: #837D6F; --jb-text-faint: #5C5749; --jb-text-on-accent: #FFFFFF; --jb-border-subtle: #262218; --jb-border-default: #322D22; --jb-border-strong: #4A4436; --jb-color-accent: var(--jb-red-400); --jb-color-accent-strong: var(--jb-red-300); --jb-color-accent-soft: color-mix(in oklab, var(--jb-red-400) 14%, var(--jb-neutral-925)); --jb-color-danger: var(--jb-red-300); --jb-color-danger-soft: color-mix(in oklab, var(--jb-red-700) 22%, var(--jb-neutral-925)); --jb-link: var(--jb-red-400); --jb-link-hover: var(--jb-red-300); --jb-link-underline: color-mix(in oklab, var(--jb-red-400) 40%, transparent); --jb-focus-ring: var(--jb-red-400); --jb-selection-bg: color-mix(in oklab, var(--jb-red-400) 26%, var(--jb-neutral-900)); --jb-elevation-sm: var(--jb-shadow-dark-sm); --jb-elevation-md: var(--jb-shadow-dark-md); --jb-elevation-lg: var(--jb-shadow-dark-lg); --jb-skeleton-base: var(--jb-neutral-900); --jb-skeleton-sheen: var(--jb-neutral-850); --jb-code-bg: #12100C; --jb-code-text: #DCD7CB; --jb-code-ln: #5C5749; --jb-code-gutter-border: #262218; --jb-code-line-highlight: color-mix(in oklab, var(--jb-red-400) 9%, transparent); --jb-syntax-keyword: #E86A7A; --jb-syntax-string: var(--jb-green-300); --jb-syntax-number: var(--jb-amber-300); --jb-syntax-comment: #78725F; --jb-syntax-type: var(--jb-violet-300); --jb-syntax-function: var(--jb-blue-300); --jb-syntax-operator: #B5AFA2; --jb-syntax-punctuation: #837D6F; --jb-syntax-annotation: var(--jb-amber-300); --jb-callout-note-bg: var(--jb-neutral-900); --jb-callout-note-border: #322D22; --jb-callout-note-accent: #B5AFA2; --jb-callout-tip-bg: color-mix(in oklab, var(--jb-green-500) 12%, var(--jb-neutral-925)); --jb-callout-tip-border: color-mix(in oklab, var(--jb-green-500) 30%, var(--jb-neutral-925)); --jb-callout-tip-accent: var(--jb-green-300); --jb-callout-info-bg: color-mix(in oklab, var(--jb-blue-500) 12%, var(--jb-neutral-925)); --jb-callout-info-border: color-mix(in oklab, var(--jb-blue-500) 30%, var(--jb-neutral-925)); --jb-callout-info-accent: var(--jb-blue-300); --jb-callout-warn-bg: color-mix(in oklab, var(--jb-amber-500) 12%, var(--jb-neutral-925)); --jb-callout-warn-border: color-mix(in oklab, var(--jb-amber-500) 30%, var(--jb-neutral-925)); --jb-callout-warn-accent: var(--jb-amber-300); --jb-callout-danger-bg: color-mix(in oklab, var(--jb-red-700) 24%, var(--jb-neutral-925)); --jb-callout-danger-border: color-mix(in oklab, var(--jb-red-700) 45%, var(--jb-neutral-925)); --jb-callout-danger-accent: var(--jb-red-300); /* Pointer arrows need more presence on dark (DESIGN_NOTES open q #5): map to text-muted rather than border-strong. */ --jb-code-display-pointer-arrow: var(--jb-text-muted); } /* ========================================================================== DARK — system preference, unless user manually chose light. Duplicate of the block above; edit both together. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --jb-surface-page: var(--jb-neutral-950); --jb-surface-raised: var(--jb-neutral-925); --jb-surface-sunken: var(--jb-neutral-900); --jb-surface-overlay: var(--jb-neutral-900); --jb-page-glow: radial-gradient( 1100px 460px at 50% -120px, color-mix(in oklab, var(--jb-red-400) 7%, transparent), transparent 72%); --jb-text-primary: #EDE9E0; --jb-text-secondary: #B5AFA2; --jb-text-muted: #837D6F; --jb-text-faint: #5C5749; --jb-text-on-accent: #FFFFFF; --jb-border-subtle: #262218; --jb-border-default: #322D22; --jb-border-strong: #4A4436; --jb-color-accent: var(--jb-red-400); --jb-color-accent-strong: var(--jb-red-300); --jb-color-accent-soft: color-mix(in oklab, var(--jb-red-400) 14%, var(--jb-neutral-925)); --jb-color-danger: var(--jb-red-300); --jb-color-danger-soft: color-mix(in oklab, var(--jb-red-700) 22%, var(--jb-neutral-925)); --jb-link: var(--jb-red-400); --jb-link-hover: var(--jb-red-300); --jb-link-underline: color-mix(in oklab, var(--jb-red-400) 40%, transparent); --jb-focus-ring: var(--jb-red-400); --jb-selection-bg: color-mix(in oklab, var(--jb-red-400) 26%, var(--jb-neutral-900)); --jb-elevation-sm: var(--jb-shadow-dark-sm); --jb-elevation-md: var(--jb-shadow-dark-md); --jb-elevation-lg: var(--jb-shadow-dark-lg); --jb-skeleton-base: var(--jb-neutral-900); --jb-skeleton-sheen: var(--jb-neutral-850); --jb-code-bg: #12100C; --jb-code-text: #DCD7CB; --jb-code-ln: #5C5749; --jb-code-gutter-border: #262218; --jb-code-line-highlight: color-mix(in oklab, var(--jb-red-400) 9%, transparent); --jb-syntax-keyword: #E86A7A; --jb-syntax-string: var(--jb-green-300); --jb-syntax-number: var(--jb-amber-300); --jb-syntax-comment: #78725F; --jb-syntax-type: var(--jb-violet-300); --jb-syntax-function: var(--jb-blue-300); --jb-syntax-operator: #B5AFA2; --jb-syntax-punctuation: #837D6F; --jb-syntax-annotation: var(--jb-amber-300); --jb-callout-note-bg: var(--jb-neutral-900); --jb-callout-note-border: #322D22; --jb-callout-note-accent: #B5AFA2; --jb-callout-tip-bg: color-mix(in oklab, var(--jb-green-500) 12%, var(--jb-neutral-925)); --jb-callout-tip-border: color-mix(in oklab, var(--jb-green-500) 30%, var(--jb-neutral-925)); --jb-callout-tip-accent: var(--jb-green-300); --jb-callout-info-bg: color-mix(in oklab, var(--jb-blue-500) 12%, var(--jb-neutral-925)); --jb-callout-info-border: color-mix(in oklab, var(--jb-blue-500) 30%, var(--jb-neutral-925)); --jb-callout-info-accent: var(--jb-blue-300); --jb-callout-warn-bg: color-mix(in oklab, var(--jb-amber-500) 12%, var(--jb-neutral-925)); --jb-callout-warn-border: color-mix(in oklab, var(--jb-amber-500) 30%, var(--jb-neutral-925)); --jb-callout-warn-accent: var(--jb-amber-300); --jb-callout-danger-bg: color-mix(in oklab, var(--jb-red-700) 24%, var(--jb-neutral-925)); --jb-callout-danger-border: color-mix(in oklab, var(--jb-red-700) 45%, var(--jb-neutral-925)); --jb-callout-danger-accent: var(--jb-red-300); --jb-code-display-pointer-arrow: var(--jb-text-muted); } }