/* ================================================================================================= sjDesignTokens.css ✅ 2026-07-11 🧩 [SJ-TOKENS-PHASE0-01] Sourjoe Modernization Plan — Phase 0: token consolidation This file is the single source of truth for every shared custom property (design token) in the Book of Sourjoe. It replaces 9 separate :root blocks that were previously scattered across sjCalculatorShell.css (x2), sjCubeStyles.css (doc-only), sjDrawerStyles.css (doc-only), sjLearnStyles.css (x2 live + 1 media-query override left in place), sjMathStyles.css, sjRabbitHoleLink.css, and sjRecipes.css. (p.css's lone `:root { color-scheme: light; }` was left in place — it's a single, page-local declaration on the standalone p.html redirect stub with no duplication anywhere else, so consolidating it would only add a stylesheet request to that page for zero benefit.) [SJ-P0P1-RETIRED-01] 2026-07-11: p0.html/p0.css/p0.js and p1.html/p1.css/p1.js — two earlier developmental versions of the public entry page that p.html superseded — were retired and removed from the project entirely. --sjp-welcome-title-width, which existed only for their own header layout, was removed along with them rather than left as dead weight. If you're reading old comments elsewhere in this file mentioning p0.css/p1.css, that's what they mean. RULES FOR THIS FILE: - Load this stylesheet FIRST, before any component CSS file, in every page . - Every value below was copied verbatim from its original location — this phase makes ZERO visual changes. Only Phase 1+ (typography/motion/radius/shadow) will introduce new values. - Media-query-scoped variable overrides (responsive behavior) are intentionally left in their original component files — they are not drift, they're legitimate per-breakpoint values. See sjLearnStyles.css (--cubeBaseWidth override at max-width:400px) and sjCalculatorShell.css (--sjcalc-shell-header-height override at max-width:700px) for examples. - Component files that only ever *documented* a fallback contract in a comment (sjCubeStyles.css, sjDrawerStyles.css) were not touched — there was nothing live to move, the comment stays as documentation for anyone reading that file in isolation. ================================================================================================= */ :root { /* ============================================================ Moved from sjLearnStyles.css — shared layout / spacing ============================================================ */ --sjContentPad: 20px; /* [SJ-WIDTH-01] shared content column padding */ --sjRhHalo: 10px; /* [SJ-WIDTH-02] Rabbit Hole halo spread */ --sjRhHalo2: 20px; /* [SJ-WIDTH-03] 2x halo (used for width math) */ /* ============================================================ Moved from sjLearnStyles.css — Cube (flip-box) sizing Documented fallback contract for this token lives in sjCubeStyles.css (unchanged, doc-only comment). ============================================================ */ --cubeBaseWidth: 150px; /* Global variable defining the base width of the cube */ --cubeSideWidth: calc(var(--cubeBaseWidth) / 2); /* Half the cube width, used for positioning sides */ /* ============================================================ Moved from sjLearnStyles.css — Drawer sizing Documented fallback contract for this token lives in sjDrawerStyles.css (unchanged, doc-only comment). ============================================================ */ --drawerBaseWidth: 50%; /* used for Top & Bottom Drawers */ --drawerShiftWidth: calc((100% - var(--drawerBaseWidth)) / 2); /* Center Top & Bottom Drawers horizontally */ --drawerBaseHeight: 90%; /* ============================================================ Moved from sjLearnStyles.css — Safe-top / browser UI offsets (mobile) - --safeTop: iOS safe-area inset (env / constant fallback) - --vvTop: Chrome VisualViewport offsetTop (set in JS) - --fallbackTop: extra pad for Chrome portrait edge-cases (set in JS) - --appTop: effective top offset used by sticky headers + body padding ============================================================ */ --safeTop: env(safe-area-inset-top, 0px); --vvTop: 0px; /* JS updates this */ --fallbackTop: 0px; /* JS updates this */ --appTop: max(var(--safeTop), var(--vvTop), var(--fallbackTop)); /* Back-compat alias (older rules used --app-top) */ --app-top: var(--appTop); /* ============================================================ Moved from sjLearnStyles.css — Glossary search-cue highlight color ============================================================ */ --sjGlossarySearchCueColor: rgb(255, 255, 0); /* ============================================================ Moved from sjCalculatorShell.css — standalone calculator shell ============================================================ */ --sjcalc-shell-max: 940px; --sjcalc-shell-header-height: 64px; --sjcalc-shell-bg: rgba(169, 169, 169, 0.70); /* ============================================================ Moved from sjRabbitHoleLink.css — Rabbit Hole Link visuals ============================================================ */ --sjrhl-halo: 10px; --sjrhl-halo2: calc(var(--sjrhl-halo) * 2); --sjrhl-border: #75ba75; --sjrhl-accent: #2980b9; --sjrhl-bg: rgba(255, 255, 255, 0.96); --sjrhl-bg-solid: rgba(255, 255, 255, 0.99); --sjrhl-shadow: 0 0 0 var(--sjrhl-halo) rgba(117, 186, 117, 0.18), 0 3px 12px rgba(117, 186, 117, 0.22); /* 🧩 [SJ-TOKENS-PHASE0-02] Divergence found + resolved during consolidation: sjRabbitHoleLink.css previously declared --sjrhl-overlay-z: 1990 and --sjrhl-open-z: 2002, but sjMathStyles.css separately re-declared :root with --sjrhl-overlay-z: 3000 and --sjrhl-open-z: 3001 (added later so calculator-drawer Rabbit Holes sit above the drawer layer). Because sjMathStyles.css loads after sjRabbitHoleLink.css on every real page (p0, p1, sjLearn, sjCalculators), the 3000/3001 values were already the ones actually in effect everywhere except the isolated sjRabbitHoleLinkUsage.html sandbox. Keeping 3000/3001 here preserves current real-world behavior with zero visual change on every page that matters. */ --sjrhl-overlay-z: 3000; --sjrhl-open-z: 3001; /* ============================================================ Moved from sjRecipes.css — shared logo asset reference ============================================================ */ --sj-logo-url: url(https://sjMedia0.w3spaces.com/sjIcons/logoSOURJOETRANSPARENT_Cropped_31Aug21.png); /* ============================================================ ✅ 2026-07-11 🧩 [SJ-TOKENS-PHASE1A-01] Sourjoe Modernization Plan — Phase 1A: typography Zero-network-cost font stack: resolves to each OS's native UI font (San Francisco on macOS/iOS, Segoe UI on Windows, Roboto on Android/Chrome OS) instead of generic Arial. --sj-font-display is a placeholder alias for now — Phase 1B (optional, separate session) may point it at a dedicated headline webfont for chapter/section titles only. The existing Didot/Bodoni serif brand accent in p0.css/p1.css is untouched by this phase. ============================================================ */ --sj-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --sj-font-display: var(--sj-font-body); --sj-font-mono: Consolas, Monaco, monospace; /* ============================================================ ✅ 2026-07-11 🧩 [SJ-TOKENS-PHASE2-01] Sourjoe Modernization Plan — Phase 2: motion Deliberately short — fast enough to feel intentional, not slow enough to feel sluggish. Use on transform/opacity/box-shadow/background-color/color/border-color only; never on width/height/top/left (use transform: translate()/scale() there instead). ============================================================ */ --sj-ease: cubic-bezier(0.4, 0, 0.2, 1); --sj-duration-fast: 120ms; --sj-duration-base: 180ms; /* ============================================================ ✅ 2026-07-11 🧩 [SJ-TOKENS-PHASE3-01] Sourjoe Modernization Plan — Phase 3: visual weight A small, deliberate corner-radius and shadow scale. Fully-round shapes (pills, circles — 999px, 50%) are intentionally NOT part of this scale; they're a different visual idea ("this is a toggle/badge/avatar") from "how soft are this card's corners," so they stay as literal values wherever they already are. ============================================================ */ --sj-radius-sm: 6px; /* inline elements, chips, badges */ --sj-radius-md: 10px; /* cards, drawers, buttons */ --sj-radius-lg: 16px; /* modals, major containers */ --sj-shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --sj-shadow-md: 0 4px 12px rgba(0,0,0,0.10); } /* 🧩 [SJ-TOKENS-PHASE2-02] Token-level reduced-motion override for any NEW rule that references --sj-duration-fast / --sj-duration-base directly (e.g. the calculator shell buttons, the glossary search-cue, the bubbles toggle switch added in this phase). */ @media (prefers-reduced-motion: reduce) { :root { --sj-duration-fast: 0ms; --sj-duration-base: 0ms; } } /* 🧩 [SJ-TOKENS-PHASE2-03] Sitewide reduced-motion safety net. p0.css/p1.css already handle prefers-reduced-motion in a few spots each, but most of the app's EXISTING transitions (the drawer's 0.3s slide, the flip-cube's 8s rotation, the Rabbit Hole fade-ins, the recipe card fades, etc.) never had any reduced-motion handling at all before this phase. Rather than hand-edit every one of those individually (more files touched, more chance of missing one), this is the standard, well-established "kill all motion" pattern: it forces every transition and animation, old or new, down to effectively 0 without changing any layout, color, or position. Nothing here removes the token override above — this is a second, broader safety net underneath it. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Legacy iOS fallback (rare, but harmless) — moved from sjLearnStyles.css */ @supports (padding-top: constant(safe-area-inset-top)) { :root { --safeTop: constant(safe-area-inset-top); } }