/** * MapDiagram — global design tokens (site + tool + floating UI). * Consume via var(--token). Do not hard-code z-index / spacing in components. */ :root { /* —— Spacing (4px grid) —— */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* —— Radius —— */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-full: 999px; /* —— Shadows (dark-first; light theme overrides below) —— */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.22); --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.28); --shadow-lg: 0 22px 50px rgba(0, 0, 0, 0.38); /* —— Typography scale —— */ --font-sans: Inter, "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --font-size-xs: 11px; --font-size-sm: 12px; --font-size-md: 13px; --font-size-base: 14px; --font-size-lg: 15px; --font-size-xl: 18px; --font-size-2xl: 22px; --line-tight: 1.15; --line-snug: 1.35; --line-relaxed: 1.55; /* —— Motion (tool + site micro-interactions) —— */ --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 0.14s; --duration-interaction: 0.2s; /* —— Touch / a11y —— */ --touch-target-min: 44px; /* —— Z-index scale (single source; overlays use only these) —— */ --z-canvas-base: 1; --z-canvas-node: 2; --z-canvas-overlay: 3; --z-canvas-marquee: 5; --z-canvas-hud: 6; --z-minimap: 12; --z-focus-chip: 14; --z-drawer-backdrop: 60; --z-drawer-panel: 70; --z-sticky-topbar: 80; --z-floating-toolbar: 95; --z-share-dock: 9990; --z-focus-modal: 9999; --z-softlock: 10010; --z-modal: 10020; --z-toast: 10030; --z-modal-raised: 10040; /* —— Site shell (marketing pages use site.css aliases) —— */ --z-page-header: 30; /* —— Breakpoints (reference in JS via matchMedia; document for designers) —— */ --bp-tablet: 1024px; --bp-mobile: 760px; /* Destructive buttons: tool sets --danger; see .danger in tool.html */ --text-on-danger: #fff7f8; --danger-border: color-mix(in srgb, var(--danger, #ef5b5b) 58%, #1a0a0c); } html[data-theme="light"] { --shadow-xs: 0 1px 2px rgba(20, 40, 80, 0.06); --shadow-sm: 0 4px 14px rgba(20, 40, 80, 0.08); --shadow-md: 0 12px 28px rgba(20, 40, 80, 0.1); --shadow-lg: 0 22px 50px rgba(20, 40, 80, 0.12); --text-on-danger: #ffffff; --danger-border: color-mix(in srgb, var(--danger, #c42f2f) 78%, #121820); } /* High contrast (optional; set data-contrast="high" on ) */ html[data-contrast="high"] { --outline-focus: 2px solid currentColor; } html[data-contrast="high"][data-theme="light"] :where(button, a, input, select, textarea):focus-visible { outline: var(--outline-focus); outline-offset: 2px; } html[data-contrast="high"]:not([data-theme="light"]) :where(button, a, input, select, textarea):focus-visible { outline: var(--outline-focus); outline-offset: 2px; }