/* ============================================================================= Shared design tokens — single source of truth for primitives that BOTH the parent document AND same-origin iframes need. Loaded by: - The parent app via `` in `src/app/layout.tsx`. The link is placed before the bundled `globals.css`, so when globals.css's rules look up `var(--grid-space-dot)`, etc., the variables are already defined. - Same-origin iframes (e.g. `public/media/discourse-ai/...`) via `` in their own ``. Iframes can't see CSS vars defined by the parent, so anything the iframe needs to share with the deck must live here. What lives here vs. in globals.css: - HERE: visual primitives an iframe might want — ink colors, NU brand palette, grid spacing, the duotone shadow pattern, font-family fallback chains, the card surface recipe. - In globals.css: deck-chrome-only tokens (header padding, polaroid styling, spotlight effect, slide layout sizing, stage shadow geometry) and all the actual rules (`.stage`, `.panels`, `.header`, etc.). When promoting a new token from globals.css into this file: - Move the declaration here. - Replace it in globals.css with a one-line pointer comment so it doesn't silently get reintroduced. - If you're moving a recipe (a token composed from other tokens via `calc()` / `var()`), drag the upstream primitives with it so the recipe stays self-contained on this side of the iframe boundary. Adding a new embed: - Copy `public/media/_template/embed-starter.html` and edit from there. The template already wires in this file via a `` and demonstrates `.card` + the brand-color vars. ========================================================================== */ :root { /* --- Ink + grid colors ----------------------------------------------- */ --ink: #14131A; --ink-soft: #4D4B57; --ink-faint: #8C8A96; --grid: #C5C2CF; --grid-soft: #DCDAE3; /* --- NU brand palette (subset) -------------------------------------- */ --nu-purple: #4E2A84; /* NU_PRIMARY[100] — main brand purple */ --nu-purple-deep: #401F68; /* NU_PRIMARY[120] */ --nu-purple-soft: #B6ACD1; /* NU_PRIMARY[30] */ --nu-purple-pale: #E4E0EE; /* NU_PRIMARY[10] */ /* --- Duotone "misregistered print" shadow primitives ---------------- The two halves of the deck's signature shadow. Compose them with element-specific x/y/blur trios (see `--pill-shadow` below for the canonical pattern); any component that wants the same look — buttons on hover, inline accents, future card variants — should compose these the same way rather than picking new accent colors. */ --shadow-red: #EF553F; /* NU_SECONDARY.red.bright — top-left half */ --shadow-blue: #5091CD; /* NU_SECONDARY.blue.bright — bottom-right half */ /* --- Grid spacing --------------------------------------------------- */ --grid-space-dot: 16px; /* primary dot grid spacing */ --grid-space-major: 80px; /* major grid hairlines (every 5 dots) */ /* --- Card gutter ---------------------------------------------------- Standard space between adjacent card surfaces in dot-snapped layouts — 3 dots (48px). Use anywhere two cards sit side-by-side or stacked (iframe wireframe's sheet + persona rail, DiscourseAI demo's processing pane + chat card, Heartsong's left/right columns and instructions/camera stack). 3 dots keeps the gutter visibly distinct from internal card padding (typically 1 dot) while remaining a whole-dot multiple so the corner-on-dot invariant composes through the layout. */ --card-gutter: calc(var(--grid-space-dot) * 3); /* --- Fonts ---------------------------------------------------------- The parent has next/font load Inter / Alfa Slab One / Caveat Brush / Mukta and sets `--font-sans / -title / -hand / -casual` on `` via a class. That class wins on equal specificity because it loads after this file. In iframes the class isn't applied, so the chains below act as system fallbacks. Science Gothic (`--font-mono`) is loaded via a `` to Google Fonts in `layout.tsx`; iframes that want it should add the same `` to their own head. */ --font-sans: ui-sans-serif, system-ui, sans-serif; --font-hand: 'Caveat Brush', 'Caveat', cursive; --font-title: 'Alfa Slab One', ui-serif, Georgia, serif; --font-casual: 'Mukta', ui-rounded, sans-serif; --font-mono: 'Science Gothic', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* --- Pill / duotone shadow recipe ---------------------------------- The canonical "misregistered print" shadow geometry — currently applied to the footer "Built With" pills. Reuse `--pill-shadow` directly for elements that should match, or compose your own x/y/blur trio with `--shadow-red` / `--shadow-blue` for a variant (e.g. a larger hover shadow on a primary CTA). */ --pill-shadow-x: 3px; --pill-shadow-y: 1px; --pill-shadow-blur: 1px; --pill-shadow: calc(-1 * var(--pill-shadow-x)) calc(-1 * var(--pill-shadow-y)) var(--pill-shadow-blur) var(--shadow-red), var(--pill-shadow-x) var(--pill-shadow-y) var(--pill-shadow-blur) var(--shadow-blue); /* --- Card surface recipe ------------------------------------------- The framed content sheet used by the chat card, fact cards, the LLM prompt sheet, and the DiscourseAI editor wireframe's sheet + persona rail. Apply via the `.card` class below. */ --card-radius: 0.5rem; --card-border-width: 1px; --card-border-color: rgb(231, 229, 228); /* stone-200 */ --card-bg: white; --card-shadow: calc(var(--grid-space-dot) / 2) calc(var(--grid-space-dot) / 2) 0 0 rgba(204, 204, 204, 0.8); } /* Card surface utility — apply on any element that should read as a framed content sheet. Works in JSX `className`, raw HTML `class`, and `motion.div` className. Parent React consumers should prefer the `` / `` wrappers in `src/components/Card.tsx` for discoverability; this class is what they expand to. */ .card { border-radius: var(--card-radius); border: var(--card-border-width) solid var(--card-border-color); background: var(--card-bg); box-shadow: var(--card-shadow); }