/* JSONYard design tokens. Fonts loaded via Google Fonts CDN (preconnect in ). */ :root { /* Type stacks */ --font-sans: "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", "JetBrains Mono Variable", ui-monospace, "SF Mono", "Cascadia Code", Consolas, Menlo, monospace; --font-display: "Inter", "Inter Variable", system-ui, sans-serif; /* Type scale: size / line-height / weight */ --fs-11: 11px; --lh-11: 1.4; --fw-11: 500; --fs-12: 12px; --lh-12: 1.5; --fw-12: 500; --fs-13: 13px; --lh-13: 1.5; --fw-13: 400; --fs-14: 14px; --lh-14: 1.6; --fw-14: 400; --fs-15: 15px; --lh-15: 1.55; --fw-15: 500; --fs-18: 18px; --lh-18: 1.35; --fw-18: 600; --fs-22: 22px; --lh-22: 1.3; --fw-22: 600; --fs-28: 28px; --lh-28: 1.25; --fw-28: 700; /* Spacing — 4-base ramp */ --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 12px; --space-6: 16px; --space-7: 24px; --space-8: 32px; --space-9: 48px; --space-10: 64px; /* Radii */ --radius-xs: 4px; --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-pill: 999px; /* Component dimensions */ --header-h: 52px; --toolbar-h: 40px; --btn-h: 30px; --btn-h-sm: 24px; --input-h: 32px; --status-h: 28px; --footer-h: 44px; /* Light surfaces (lowest -> highest) */ --bg: #ffffff; --bg-elev: #fafafb; --bg-elev-2: #f4f4f6; --bg-input: #ffffff; --bg-overlay: rgba(15, 16, 22, 0.04); /* Borders */ --border: #e6e7eb; --border-strong: #d1d3d9; --border-focus: #6366f1; /* Text */ --text: #111318; --text-muted: #5a606b; --text-soft: #8b919c; --text-on-accent: #ffffff; /* Accent — Iris */ --accent: #5b5bd6; --accent-hover: #4f4fc7; --accent-active: #4040b3; --accent-soft: #ecedfb; --accent-ring: rgba(91, 91, 214, 0.35); /* Semantic */ --success: #1a7f4f; --success-soft: #e6f4ec; --warning: #a96b00; --warning-soft: #fdf3e0; --danger: #c4332c; --danger-soft: #fbe9e7; /* JSON syntax tokens */ --tok-key: #0550ae; --tok-string: #0a7d3a; --tok-number: #953800; --tok-bool: #6639ba; --tok-null: #6e7681; --tok-punct: #57606a; --tok-error: #c4332c; /* Shadows */ --shadow-sm: 0 1px 2px rgba(15, 16, 22, 0.06); --shadow-md: 0 6px 24px -6px rgba(15, 16, 22, 0.12), 0 1px 2px rgba(15, 16, 22, 0.06); } html[data-theme="dark"] { --bg: #0b0d12; --bg-elev: #14171e; --bg-elev-2: #1c2029; --bg-input: #0b0d12; --bg-overlay: rgba(0, 0, 0, 0.5); --border: #242832; --border-strong: #343a47; --border-focus: #8b8af7; --text: #e8eaef; --text-muted: #a0a6b3; --text-soft: #6c727f; --text-on-accent: #ffffff; --accent: #8b8af7; --accent-hover: #a3a2fa; --accent-active: #6e6df0; --accent-soft: #1f2040; --accent-ring: rgba(139, 138, 247, 0.45); --success: #4ade80; --success-soft: #0f2419; --warning: #fbbf24; --warning-soft: #2a1f08; --danger: #f87171; --danger-soft: #2a1414; --tok-key: #79c0ff; --tok-string: #7ee787; --tok-number: #ffa657; --tok-bool: #d2a8ff; --tok-null: #8b949e; --tok-punct: #8b949e; --tok-error: #ff7b72; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 8px 28px -8px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4); } @media (prefers-color-scheme: dark) { html:not([data-theme]) { --bg: #0b0d12; --bg-elev: #14171e; --bg-elev-2: #1c2029; --bg-input: #0b0d12; --bg-overlay: rgba(0, 0, 0, 0.5); --border: #242832; --border-strong: #343a47; --border-focus: #8b8af7; --text: #e8eaef; --text-muted: #a0a6b3; --text-soft: #6c727f; --text-on-accent: #ffffff; --accent: #8b8af7; --accent-hover: #a3a2fa; --accent-active: #6e6df0; --accent-soft: #1f2040; --accent-ring: rgba(139, 138, 247, 0.45); --success: #4ade80; --success-soft: #0f2419; --warning: #fbbf24; --warning-soft: #2a1f08; --danger: #f87171; --danger-soft: #2a1414; --tok-key: #79c0ff; --tok-string: #7ee787; --tok-number: #ffa657; --tok-bool: #d2a8ff; --tok-null: #8b949e; --tok-punct: #8b949e; --tok-error: #ff7b72; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 8px 28px -8px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4); } } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-14); line-height: var(--lh-14); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv11" on, "ss01" on, "ss03" on, "calt" off; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code, pre, kbd, .editor, .tree { font-family: var(--font-mono); font-feature-settings: "calt" off, "liga" off, "zero" on; } kbd { font-size: var(--fs-11); font-weight: var(--fw-11); color: var(--text-muted); background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 1px 5px; }