/* tokens.css — CSS custom properties for PGM Map Studio. * Only :root variables here. No selectors, no component rules. * Load this before editor.css and components.css in every template. */ :root { /* Default (dark) theme. Light overrides live in the `:root[data-theme="light"]` * block at the foot of this file — keep the two in sync. Only the COLOUR tokens are * themed; the structural tokens (spacing, radii, fonts, widths, motion) are shared. * Theme is selected by `data-theme` on (set by the inline script in index.html). */ color-scheme: dark; /* ── Backgrounds ─────────────────────────────────────────────────────── */ /* The studio's own bar: the recessed surface of whichever theme is on, so it frames the tool's bar under it. */ --nav-bg: var(--bg-deep); --nav-border: var(--border); --nav-hover: var(--bg-panel); --nav-active: var(--bg-selected); --nav-text: var(--text-secondary); --nav-text-muted: var(--text-muted); --nav-text-strong: var(--text-strong); --bg-canvas: #080f1a; /* map/sketch VIEWPORT (themed; light override in [data-theme=light]) */ --bg-deep: #080f1a; /* deepest UI surface (logo box) */ --bg-base: #0f172a; /* page background */ --bg-panel: #1e293b; /* sidebars, panels, topbar */ --bg-multi: #1a3a2f; /* multi-team selection tint */ --bg-selected: #1e3a5f; /* selected row / active fill */ --bg-selected-hover: color-mix(in oklch, var(--bg-selected) 27%, transparent); --bg-selected-child: color-mix(in oklch, var(--bg-selected) 47%, transparent); --bg-vis-hover: #162032; /* visibility button hover */ --bg-base-glass: color-mix(in oklch, var(--bg-base) 80%, transparent); --bg-panel-glass: color-mix(in oklch, var(--bg-panel) 80%, transparent); /* ── Borders ─────────────────────────────────────────────────────────── */ --border: #334155; --border-swatch: rgba(255,255,255,0.15); /* overlay edge on color-filled swatches/dots */ /* ── Text hierarchy (quiet → strong) — all pass WCAG AA on bg-panel and bg-base ── */ --text-muted: #8397b0; /* 4.9:1 — section headers, metadata, tags */ --text-secondary: #94a3b8; /* 5.7:1 — form labels, secondary content */ --text-primary: #cbd5e1; /* 9.9:1 — default body text */ --text-bright: #e2e8f0; /* 11.9:1 — headings, emphasis */ --text-strong: #fff; /* strongest text / active chrome (headings, active rail, cat headers) */ --text-white: #fff; /* text on a SATURATED accent fill (stays light in every theme) */ /* ── Accent (primary action colour) ─────────────────────────────────── */ --accent: #3b82f6; --accent-light: #60a5fa; --accent-lighter: #93c5fd; --accent-bg-hover: oklch(from var(--accent) calc(l - 0.12) c h); /* darkened accent for hover */ /* ── Shadows ─────────────────────────────────────────────────────────── */ --shadow-ring: 0 0 0 1px var(--accent); /* selection outline — list rows, inputs */ --shadow-float: 0 8px 24px oklch(0% 0 0 / 0.40); /* elevated surfaces — menus, overlays */ --shadow-raised: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent), 0 2px 8px rgb(0 0 0 / 0.22); /* raised callout card — smart-suggestion */ /* ── Semantic status ─────────────────────────────────────────────────── */ /* -bg: Tailwind 900 blended into --bg-panel (color-mix preserves bg-panel tracking) */ --color-success: #22c55e; /* green-500 — 6.4:1 on bg-panel */ --color-success-bg: color-mix(in srgb, #14532d 27%, var(--bg-panel)); /* green-900 @ 27% */ --color-error: #f87171; /* red-400 — 5.3:1 on bg-panel (was red-500 at 3.9:1, sub-AA) */ --color-error-bg: color-mix(in srgb, #7f1d1d 27%, var(--bg-panel)); /* red-900 @ 27% */ --color-error-hover: color-mix(in oklch, var(--color-error) 10%, transparent); /* danger hover tint */ --color-warning: #f59e0b; /* amber-500 — 6.8:1 on bg-panel */ --color-warning-bg: color-mix(in srgb, #451a03 27%, var(--bg-panel)); /* amber-900 @ 27% */ --text-on-status: #000; /* text/number on a solid status fill (e.g. done step badge on green) */ /* ── Code / monospace highlight ──────────────────────────────────────── */ --code-color: #7dd3fc; /* ── Canvas SVG colours ───────────────────────────────────────────────── */ /* Island polygons — single fill for both editor and sketch */ --canvas-island: #6b7280; /* gray-500 — island fill */ --canvas-island-stroke: oklch(from var(--canvas-island) calc(l * 0.55) c h); /* darkened stroke */ /* Sketch shape operations */ --canvas-add-fill: #0d9488; /* teal-600 */ --canvas-add-stroke: #0f766e; /* teal-700 */ --canvas-sub-fill: #dc2626; /* red-600 */ --canvas-sub-stroke: #b91c1c; /* red-700 */ /* Sketch result polygon (boolean-computed island outlines) */ --canvas-result-fill: #6366f1; /* indigo-500 */ --canvas-result-stroke: #4338ca; /* indigo-700 */ /* Mirror preview overlay (lower-opacity tint over computed islands) */ --canvas-mirror-fill: rgba(99, 102, 241, 0.12); --canvas-mirror-stroke: rgba(99, 102, 241, 0.40); /* Symmetry axis indicator — center crosshair and axis line in Setup */ --canvas-axis: #a78bfa; /* violet-400 */ /* Symmetry overlay in overview/configure previews — axis line + center marker. Distinct (more saturated) from --canvas-axis used by the editor's radial crosshair. */ --canvas-symmetry: #a855f7; /* purple-500 */ /* High-contrast "ink" for lines/labels/outlines drawn over the canvas bg (block highlight, marker outlines). White on the dark viewport; the light theme flips it to dark slate. */ --canvas-ink: #ffffff; --canvas-marker-stroke: var(--canvas-ink); /* Minecraft chunk grid (16-block boundaries, lighter purple) */ --canvas-chunk: color-mix(in oklab, var(--canvas-axis) 38%, transparent); /* Relief contours — the map's own convention, and the reason they are amber rather than another blue or purple: a contour has to read as a line ON the ground while the island, mirror, axis and chunk grids all read as lines ABOUT it, and it is the one overlay drawn over the painted blocks. Index lines (every fifth) carry the label and are the same hue at full strength, so the hierarchy is weight, not colour. */ --canvas-contour: rgba(251, 191, 36, 0.45); /* amber-400 */ --canvas-contour-index: rgba(251, 191, 36, 0.92); /* Canvas SVG area background */ --canvas-bg: var(--bg-canvas); /* alias — the viewport background (follows the theme) */ /* Floating canvas chrome — the readout, layer bar and dock that sit ON the viewport rather than in a bar above it. They are panel-coloured but never opaque: a control that hides the map it is about is worse than one that is slightly harder to read, so the surface is blurred glass and the elevation comes from the shadow. */ --canvas-float-bg: color-mix(in oklch, var(--bg-panel) 88%, transparent); --canvas-float-border: color-mix(in oklch, var(--border) 85%, transparent); --canvas-float-shadow: 0 6px 20px oklch(0% 0 0 / 0.42); /* Region shapes — editor canvas (all types share one colour; runtime supplies per-region value) */ --canvas-region: #94a3b8; /* slate-400 — fallback / design-doc placeholder */ /* Resize handles — sketch selected + editor selected */ --canvas-handle-fill: #0f172a; /* slate-950 */ --canvas-handle-stroke: #94a3b8; /* slate-400 */ /* Side-view build-height line (2D canvas — resolved via getComputedStyle) */ --canvas-sideview-line: rgba(250, 110, 50, 0.9); /* orange */ /* ── Type scale ─────────────────────────────────────────────────────── */ --font-lg: 14px; /* body default */ --font-md: 13px; /* inputs, list labels, form values */ --font-base: 12px; /* most common — badges, buttons, panels */ --font-sm: 11px; /* helper text, field labels, tags */ --font-xs: 10px; /* smallest prose, section headers */ /* ── Sidebar widths ─────────────────────────────────────────────────── */ --sidebar-width: 280px; /* left panels — list / form content */ --inspector-width: 280px; /* right panels — detail / property view */ /* ── Icon sizes ──────────────────────────────────────────────────────── */ /* A lucide glyph's box. The app named eight sizes (11 · 13 · 14 · 15 · 16 · 20 · 22 · 24px) across twenty * rules with no scale behind them; these are the five they collapse to. --icon-md is the default, applied * to every glyph by the `svg.lucide` rule in components.css — studio.js sets the same number as an * attribute so a glyph is never briefly lucide's own 24px before the stylesheet lands. */ --icon-xs: 13px; /* dense chrome — a close ✕, a step chip, a search adornment */ --icon-sm: 14px; /* inline with a line of text — tray labels, footer links */ --icon-md: 16px; /* the default — buttons, toolbars, headings */ --icon-lg: 20px; /* a standalone affordance — card heads, the nav rail */ --icon-xl: 24px; /* hero — the landing cards */ /* ── Control height ──────────────────────────────────────────────────── */ /* One control tall — what a .field-input select resolves to at --font-md. A select, a text input and an * icon button each land on a different intrinsic height for the same type size (31 / 29 / 26px), so a row * that mixes them states the height once and every control in it takes that. The square ones (an icon * button, a colour chip, a style swatch) then read their WIDTH off it, which only works against a height * that is definite — `align-items: stretch` alone is not, and an aspect-ratio given nothing to measure * collapses the box instead. */ --control-height: 31px; /* ── Spacing scale ───────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; /* ── Border radii ────────────────────────────────────────────────────── */ --radius-sm: 3px; --radius-md: 6px; --radius-pill: 9999px; /* capsule / pill shapes */ /* ── Motion ──────────────────────────────────────────────────────────── */ --transition-fast: 0.12s ease; } /* ════════════════════════════════════════════════════════════════════════════ LIGHT THEME — colour overrides only (structural tokens inherit from :root). Selected via . Deliberately does NOT touch: • --bg-canvas / --canvas-* : the map viewport stays dark in every theme, so the block-overlay images, bounding boxes, axes, handles and markers keep their contrast. (Chat / dye / team / wool palettes live outside CSS entirely.) Slate-based ramp mirroring the dark theme (Tailwind slate / blue / status hues). ════════════════════════════════════════════════════════════════════════════ */ :root[data-theme="light"] { color-scheme: light; /* ── Backgrounds (elevation inverts: raised = lighter/white) ──────────── */ --bg-deep: #e2e8f0; /* slate-200 — recessed UI surface */ --bg-base: #f1f5f9; /* slate-100 — page background */ --bg-panel: #ffffff; /* white — sidebars, panels, topbar */ --bg-multi: #dcfce7; /* green-100 — multi-team tint */ --bg-selected: #bfdbfe; /* blue-200 — selected row / active fill */ --bg-selected-hover: #eff6ff; /* blue-50 — row hover (explicit; dark's color-mix is too faint here) */ --bg-selected-child: #dbeafe; /* blue-100 — child of a selected row */ --bg-vis-hover: #e2e8f0; /* slate-200 — visibility button hover */ /* ── Borders ─────────────────────────────────────────────────────────── */ --border: #cbd5e1; /* slate-300 */ --border-swatch: rgba(0,0,0,0.18); /* dark edge on colour-filled swatches/dots */ /* ── Text hierarchy (quiet → strong) — all pass WCAG AA on white / slate-100 / slate-200 ── */ --text-muted: #586780; /* slate-blue 500/600 — 5.7:1 white, 5.2:1 base, 4.7:1 deep */ --text-secondary: #475569; /* slate-600 — 7.6:1 white */ --text-primary: #1e293b; /* slate-800 */ --text-primary: #1e293b; /* slate-800 */ --text-bright: #0f172a; /* slate-900 */ --text-strong: #0f172a; /* slate-900 — headings / active chrome */ /* --text-white stays #fff (text on saturated accent fills) */ /* ── Accent — the "lighter" steps darken (they read as text on light fills) ── */ --accent-light: #2563eb; /* blue-600 — icon / text accent */ --accent-lighter: #1d4ed8; /* blue-700 — text on light-blue fills */ /* --accent + --accent-bg-hover unchanged (work on both themes) */ /* ── Shadows — softer on light ───────────────────────────────────────── */ --shadow-float: 0 8px 24px rgb(15 23 42 / 0.18); --shadow-raised: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 1px 3px rgb(15 23 42 / 0.12); /* ── Semantic status — dark text on clean 100-level tints (AA badge text on -bg ≥4.5; overrides the dark theme's color-mix -bg, which goes muddy-grey on white). ── */ --color-success: #166534; /* green-800 — 6.5:1 on success-bg */ --color-success-bg: #dcfce7; /* green-100 */ --color-error: #b91c1c; /* red-700 — 5.3:1 on error-bg */ --color-error-bg: #fee2e2; /* red-100 */ --color-warning: #b45309; /* amber-700 — 4.5:1 on warning-bg */ --color-warning-bg: #fef3c7; /* amber-100 */ --text-on-status: #fff; /* white text on the solid status fills (≥5:1) */ /* ── Code / monospace highlight ──────────────────────────────────────── */ --code-color: #0369a1; /* sky-700 */ /* ── Canvas / map viewport — light too (the rest of --canvas-* are saturated mid-tones that read on both backgrounds and are left at their dark values). ── */ --bg-canvas: #e2e8f0; /* slate-200 — light viewport (recessed under white panels) */ --canvas-float-shadow: 0 6px 20px rgb(15 23 42 / 0.16); /* the floating chrome, softer on light */ --canvas-ink: #0f172a; /* slate-900 — dark lines/outlines over the light canvas */ --canvas-axis: #7c3aed; /* violet-600 — axis/crosshair, darker for light bg */ --canvas-region: #64748b; /* slate-500 — region fallback, darker for light bg */ }