/* ---------------------------------------------------------------------------- Design tokens: the single source of truth for the palette. Loaded by the app (linked in index.html) and by the invite-gate login page (middleware.js GATE_HTML links it too), so the two can never drift. Change a token here and every surface, including the gate, re-tunes. ---------------------------------------------------------------------------- */ :root { /* --- Palette primitives (OKLCH parts) --- Every accent/ink shadow, tint, and translucency derives from these. Change a hue or chroma here and the whole system re-tunes. */ --accent-h: 258; --accent-c: 0.15; --accent-l: 40%; /* Second accent, added for the Console redesign's indigo+cyan brand pair (the logo glyph, the Jim-mode composer). Deliberately a separate primitive rather than repurposing --accent-*, which is used pervasively across the whole existing UI and would recolor everything else if changed. */ --accent-2-h: 218; --accent-2-c: 0.13; --accent-2-l: 68%; --accent-2: oklch(var(--accent-2-l) var(--accent-2-c) var(--accent-2-h)); --ink-h: 60; --ink-c: 0.005; --ink-l: 18%; --paper-h: 90; --paper-c: 0.010; /* --- Semantic colors --- */ --accent: oklch(var(--accent-l) var(--accent-c) var(--accent-h)); --accent-ink: #ffffff; --ink: oklch(var(--ink-l) var(--ink-c) var(--ink-h)); --ink-2: oklch(28% var(--ink-c) var(--ink-h)); --muted: oklch(60% var(--ink-c) var(--ink-h)); --hairline: oklch(var(--ink-l) var(--ink-c) var(--ink-h) / 0.10); --hairline-strong: oklch(var(--ink-l) var(--ink-c) var(--ink-h) / 0.18); --paper: #FCF8F3; --paper-2: oklch(93% var(--paper-c) var(--paper-h)); --paper-translucent: color-mix(in oklch, var(--paper) 78%, transparent); --surface: #ffffff; --surface-2: oklch(98% 0.008 var(--paper-h)); --danger: oklch(52% 0.16 25); --font-display: "Instrument Serif", "Times New Roman", serif; --font-body: "Geist", ui-sans-serif, -apple-system, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; /* --- Shadows --- All ink-tinted shadows track --ink-* so they stay in the warm-neutral family. All accent-tinted shadows track --accent-* so a hue change cascades. */ --shadow-window: 0 1px 0 oklch(100% 0 0 / 0.6) inset, 0 0 0 0.5px oklch(var(--ink-l) var(--ink-c) var(--ink-h) / 0.18), 0 12px 30px -8px oklch(var(--ink-l) var(--ink-c) var(--ink-h) / 0.18), 0 30px 70px -20px oklch(var(--ink-l) var(--ink-c) var(--ink-h) / 0.25); --shadow-window-accent: 0 0 0 1px var(--accent), 0 12px 30px -8px oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.18), 0 30px 70px -20px oklch(var(--ink-l) var(--ink-c) var(--ink-h) / 0.22); --shadow-rail: 0 0 0 0.5px oklch(var(--ink-l) var(--ink-c) var(--ink-h) / 0.06), 0 10px 30px -16px oklch(var(--ink-l) var(--ink-c) var(--ink-h) / 0.18); /* Folder-tile hover (Maps/RAG thumbnail cards): a light lift, distinct from --shadow-window's much heavier drop shadow meant for actual floating chrome. */ --shadow-tile-hover: 0 0 0 0.5px oklch(var(--ink-l) var(--ink-c) var(--ink-h) / 0.08), 0 4px 14px -6px oklch(var(--ink-l) var(--ink-c) var(--ink-h) / 0.18); --shadow-composer: 0 4px 14px -8px oklch(var(--ink-l) var(--ink-c) var(--ink-h) / 0.18); --shadow-composer-floating: 0 8px 30px -12px oklch(var(--ink-l) var(--ink-c) var(--ink-h) / 0.18), 0 2px 6px -2px oklch(var(--ink-l) var(--ink-c) var(--ink-h) / 0.08); --shadow-bubble: 0 1px 2px oklch(22% var(--ink-c) var(--ink-h) / 0.05); --shadow-bubble-accent: 0 1px 2px oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.18); --shadow-ball: 0 2px 6px -2px oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.35); /* Sticky-note card (StickyNote.jsx): two-layer drop shadow + inset top highlight, tracked to --ink-* like the other --shadow-* tokens. */ --shadow-note: 0 14px 26px -12px oklch(var(--ink-l) var(--ink-c) var(--ink-h) / 0.35), 0 3px 6px 0 oklch(var(--ink-l) var(--ink-c) var(--ink-h) / 0.14), 0 1px 0 oklch(100% 0 0 / 0.7) inset; /* "Available" status pill (StickyNote.jsx). Previously hardcoded hex in CurrentlyCard.jsx; tokenized here so it's no longer a one-off color. */ --status-positive-h: 142; --status-positive-c: 0.16; --status-positive-l: 45%; --status-positive: oklch(var(--status-positive-l) var(--status-positive-c) var(--status-positive-h)); --status-positive-bg: oklch(var(--status-positive-l) var(--status-positive-c) var(--status-positive-h) / 0.14); --status-positive-border: oklch(var(--status-positive-l) var(--status-positive-c) var(--status-positive-h) / 0.3); --status-positive-dot: oklch(68% var(--status-positive-c) var(--status-positive-h)); /* DockAvatarBadge's "live" pulse ring, same 68% lightness as the dot above, just two alpha stops for the box-shadow keyframe animation. */ --status-positive-pulse-start: oklch(68% var(--status-positive-c) var(--status-positive-h) / 0.55); --status-positive-pulse-end: oklch(68% var(--status-positive-c) var(--status-positive-h) / 0); /* Text rendered directly over the evidence-pane wallpaper photo (ConnectCard's dock labels), where --ink is unreadable. Not derived from the ink/paper primitive tokens on purpose: it needs to stay legible over an arbitrary photo, not track the paper theme. */ --on-image-ink: oklch(100% 0 0); --shadow-on-image-text: 0 1px 3px oklch(0% 0 0 / 0.45), 0 1px 12px oklch(0% 0 0 / 0.25); }