/* --------------------------------------------------------------- tokens.css — design tokens for Flow-Chart Generator (NTS). data-theme on : "light" | "dark" | absent (follows the OS). --------------------------------------------------------------- */ :root { --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --ease: cubic-bezier(0.32, 0.72, 0.36, 1); --dur: 160ms; --ok: #3f8a5c; --warn: #b8862f; --danger: #b1544f; --shadow-1: 0 1px 2px rgba(20, 24, 28, 0.06), 0 1px 3px rgba(20, 24, 28, 0.05); --shadow-2: 0 8px 24px rgba(20, 24, 28, 0.14); /* light (default) */ --bg: #f1f3f6; --bg-alt: #e7ebf0; --surface: #ffffff; --surface-2: #f4f6f8; --surface-hover: #eef1f5; --border: #d9dfe6; --border-strong: #bcc6d1; --text: #1f2733; --text-dim: #5b6675; --text-faint: #8a94a2; --accent: #2f6fed; --accent-hover: #2a5fd0; --accent-soft: #e5edfd; --accent-line: #b7cdf9; --on-accent: #ffffff; color-scheme: light; } :root[data-theme="dark"] { --bg: #14181f; --bg-alt: #10131a; --surface: #1b202a; --surface-2: #212734; --surface-hover: #262d3b; --border: #2c3341; --border-strong: #3c4557; --text: #e6e9ef; --text-dim: #a3acbd; --text-faint: #767f91; --accent: #6a9bff; --accent-hover: #85adff; --accent-soft: #202a44; --accent-line: #37477a; --on-accent: #0d1420; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --bg: #14181f; --bg-alt: #10131a; --surface: #1b202a; --surface-2: #212734; --surface-hover: #262d3b; --border: #2c3341; --border-strong: #3c4557; --text: #e6e9ef; --text-dim: #a3acbd; --text-faint: #767f91; --accent: #6a9bff; --accent-hover: #85adff; --accent-soft: #202a44; --accent-line: #37477a; --on-accent: #0d1420; color-scheme: dark; } }