/* ============================================================
JSON Toolkit — Design System
Tokens: spacing, typography, color, elevation
============================================================ */
/* ── Google Fonts ─────────────────────────────────────────── */
/* Fonts are loaded via + tags
injected by layout.js into for non-blocking resource loading.
Fallback stacks are defined in --font-sans and --font-mono below. */
/* ── CSS Custom Properties (Tokens) ──────────────────────── */
/* ── CSS Custom Properties (Theming Tokens) ───────────────── */
:root {
/* Default: Light Theme */
--bg-base: hsl(220, 20%, 97%);
--bg-surface: hsl(0, 0%, 100%);
--bg-raised: hsl(220, 16%, 93%);
--bg-overlay: hsl(220, 14%, 88%);
--bg-border: hsl(220, 14%, 84%);
--bg-header: hsla(0, 0%, 100%, 0.85);
--bg-ad-slot: hsl(220, 16%, 94%);
/* Text */
--text-primary: hsl(220, 25%, 12%);
--text-secondary: hsl(220, 14%, 35%);
--text-muted: hsl(220, 10%, 50%);
--text-inverse: hsl(0, 0%, 100%);
/* Accent */
--accent-hue: 224;
--accent: hsl(224, 75%, 52%);
--accent-dark: hsl(224, 75%, 42%);
--accent-light: hsl(224, 80%, 93%);
--accent-glow: hsla(224, 75%, 52%, 0.2);
/* Semantic */
--success: hsl(152, 68%, 34%);
--success-bg: hsla(152, 68%, 34%, 0.1);
--error: hsl(354, 72%, 48%);
--error-bg: hsla(354, 72%, 48%, 0.1);
--warning: hsl(32, 95%, 40%);
--warning-bg: hsla(32, 95%, 40%, 0.1);
--info: hsl(202, 85%, 38%);
--info-bg: hsla(202, 85%, 38%, 0.1);
/* Syntax Highlighting (Light Theme) */
--hl-key: hsl(224, 75%, 45%);
--hl-str: hsl(152, 70%, 32%);
--hl-num: hsl(32, 95%, 38%);
--hl-bool: hsl(270, 65%, 42%);
--hl-null: hsl(220, 10%, 45%);
--ts-kw: hsl(270, 65%, 42%);
--ts-name: hsl(202, 85%, 38%);
--ts-key: hsl(224, 75%, 45%);
--ts-type: hsl(32, 95%, 38%);
--ts-str: hsl(152, 70%, 32%);
/* Elevation (shadows) */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.14);
--shadow-accent: 0 4px 16px var(--accent-glow);
/* Typography */
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
/* Spacing Scale (4px base) */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-full: 9999px;
/* Layout */
--max-content: 1200px;
--max-tool: 1200px;
/* Transitions */
--transition-fast: 120ms ease;
--transition-base: 200ms ease;
--transition-slow: 350ms ease;
/* Header */
--header-height: 64px;
}
/* ── Dark Theme Overrides ─────────────────────────────────── */
[data-theme="dark"] {
--bg-base: hsl(220, 16%, 6%);
--bg-surface: hsl(220, 14%, 10%);
--bg-raised: hsl(220, 13%, 13%);
--bg-overlay: hsl(220, 12%, 16%);
--bg-border: hsl(220, 12%, 22%);
--bg-header: hsla(220, 16%, 6%, 0.85);
--bg-ad-slot: hsl(220, 13%, 13%);
/* Text */
--text-primary: hsl(220, 20%, 95%);
--text-secondary: hsl(220, 12%, 70%);
--text-muted: hsl(220, 10%, 52%);
--text-inverse: hsl(220, 16%, 6%);
/* Accent */
--accent-hue: 224;
--accent: hsl(224, 86%, 64%);
--accent-dark: hsl(224, 86%, 54%);
--accent-light: hsla(224, 86%, 64%, 0.16);
--accent-glow: hsla(224, 86%, 64%, 0.25);
/* Semantic */
--success: hsl(152, 68%, 52%);
--success-bg: hsla(152, 68%, 52%, 0.14);
--error: hsl(0, 82%, 65%);
--error-bg: hsla(0, 82%, 65%, 0.14);
--warning: hsl(38, 92%, 60%);
--warning-bg: hsla(38, 92%, 60%, 0.14);
--info: hsl(199, 90%, 62%);
--info-bg: hsla(199, 90%, 62%, 0.14);
/* Syntax Highlighting (Dark Theme) */
--hl-key: hsl(215, 85%, 75%);
--hl-str: hsl(152, 68%, 68%);
--hl-num: hsl(38, 92%, 70%);
--hl-bool: hsl(270, 75%, 78%);
--hl-null: hsl(220, 12%, 65%);
--ts-kw: hsl(270, 75%, 78%);
--ts-name: hsl(199, 90%, 72%);
--ts-key: hsl(215, 85%, 75%);
--ts-type: hsl(38, 92%, 70%);
--ts-str: hsl(152, 68%, 68%);
/* Elevation (shadows) */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.6);
--shadow-accent: 0 4px 20px var(--accent-glow);
}
/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
}
body {
font-family: var(--font-sans);
font-size: var(--text-base);
font-weight: var(--font-normal);
line-height: var(--leading-normal);
color: var(--text-primary);
background-color: var(--bg-base);
min-height: 100vh;
display: flex;
flex-direction: column;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--accent-dark); }
button, input, textarea, select { font: inherit; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 {
font-weight: var(--font-semibold);
line-height: var(--leading-tight);
color: var(--text-primary);
}
/* ── Layout Utilities ─────────────────────────────────────── */
.container {
width: 100%;
max-width: var(--max-content);
margin-inline: auto;
padding-inline: var(--space-6);
}
@media (max-width: 640px) {
.container {
padding-inline: var(--space-4);
}
}
.container--tool {
max-width: 1200px;
}
main {
flex: 1;
padding-top: var(--space-4);
padding-bottom: var(--space-16);
}
/* ── Typography Utilities ─────────────────────────────────── */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-accent { color: var(--accent); }
.text-success { color: var(--success); }
.text-error { color: var(--error); }
.font-mono { font-family: var(--font-mono); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold{ font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }
/* ── Page Hero ────────────────────────────────────────────── */
.tool-hero {
margin-bottom: var(--space-3);
}
.tool-hero__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 2px var(--space-3);
background: var(--accent-light);
color: hsl(var(--accent-hue), 60%, 40%);
border-radius: var(--radius-full);
font-size: 11px;
font-weight: var(--font-semibold);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--space-2);
}
.tool-hero__title {
font-size: clamp(1.35rem, 2.5vw, 1.75rem);
font-weight: var(--font-bold);
background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: var(--space-2);
}
.tool-hero__desc {
font-size: var(--text-sm);
color: var(--text-secondary);
max-width: 100%;
width: 100%;
line-height: var(--leading-normal);
}
/* ── Card ─────────────────────────────────────────────────── */
.card {
background: var(--bg-surface);
border: 1px solid var(--bg-border);
border-radius: var(--radius-xl);
padding: var(--space-6);
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.card:hover {
border-color: hsla(var(--accent-hue), 86%, 60%, 0.4);
box-shadow: var(--shadow-accent);
}
.card--flat {
background: var(--bg-raised);
border-color: var(--bg-border);
}
.card--flat:hover {
border-color: var(--bg-border);
box-shadow: none;
}
/* ── Buttons ──────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
font-size: var(--text-sm);
font-weight: var(--font-semibold);
border-radius: var(--radius-md);
border: 1px solid transparent;
cursor: pointer;
transition: all var(--transition-base);
white-space: nowrap;
user-select: none;
}
.btn--primary {
background: var(--accent);
color: var(--text-inverse);
border-color: var(--accent);
box-shadow: var(--shadow-accent);
}
.btn--primary:hover {
background: var(--accent-dark);
border-color: var(--accent-dark);
transform: translateY(-1px);
box-shadow: 0 6px 24px var(--accent-glow);
}
.btn--primary:active { transform: translateY(0); }
.btn--ghost {
background: transparent;
color: var(--text-secondary);
border-color: var(--bg-border);
}
.btn--ghost:hover {
background: var(--bg-raised);
color: var(--text-primary);
border-color: var(--bg-overlay);
}
.btn--sm {
padding: var(--space-2) var(--space-3);
font-size: var(--text-xs);
border-radius: var(--radius-sm);
}
.btn--icon {
padding: var(--space-2);
border-radius: var(--radius-md);
aspect-ratio: 1;
}
/* ── Form Controls ────────────────────────────────────────── */
.label {
display: block;
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--text-secondary);
margin-bottom: var(--space-2);
}
.textarea, .input, .select {
width: 100%;
background: var(--bg-base);
color: var(--text-primary);
border: 1px solid var(--bg-border);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
font-size: var(--text-sm);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
outline: none;
}
.textarea {
font-family: var(--font-mono);
font-size: var(--text-xs);
line-height: var(--leading-relaxed);
resize: vertical;
min-height: 240px;
}
.textarea:focus, .input:focus, .select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow);
}
.textarea::placeholder, .input::placeholder {
color: var(--text-muted);
}
/* ── Status / Alert Banners ───────────────────────────────── */
.alert {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4);
border-radius: var(--radius-md);
font-size: var(--text-sm);
border: 1px solid transparent;
}
.alert--success {
background: var(--success-bg);
color: var(--success);
border-color: hsla(152, 68%, 46%, 0.3);
}
.alert--error {
background: var(--error-bg);
color: var(--error);
border-color: hsla(0, 82%, 63%, 0.3);
}
.alert--warning {
background: var(--warning-bg);
color: var(--warning);
border-color: hsla(38, 92%, 58%, 0.3);
}
.alert--info {
background: var(--info-bg);
color: var(--info);
border-color: hsla(199, 90%, 58%, 0.3);
}
/* ── Toolbar (action row above textareas) ─────────────────── */
.toolbar {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
padding: var(--space-3) var(--space-4);
background: var(--bg-raised);
border: 1px solid var(--bg-border);
border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.toolbar__label {
font-size: var(--text-xs);
font-weight: var(--font-semibold);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-right: auto;
}
/* ── Focus rings & Accessibility ─────────────────────────── */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
outline: none;
}
/* ── Split pane layout ────────────────────────────────────── */
.split-pane {
display: grid;
gap: var(--space-6);
min-width: 0;
width: 100%;
}
@media (min-width: 768px) {
.split-pane {
grid-template-columns: 1fr 1fr;
}
}
.pane {
display: flex;
flex-direction: column;
min-width: 0;
width: 100%;
}
.pane__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-2);
}
.pane__title {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* ── Code output ──────────────────────────────────────────── */
.code-output {
flex: 1;
background: var(--bg-base);
border: 1px solid var(--bg-border);
border-radius: var(--radius-md);
padding: var(--space-4);
font-family: var(--font-mono);
font-size: var(--text-xs);
line-height: var(--leading-relaxed);
color: var(--text-primary);
overflow: auto;
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: anywhere;
min-height: 240px;
min-width: 0;
tab-size: 2;
}
/* ── Flex / Grid helpers ──────────────────────────────────── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.w-full { width: 100%; }
/* ── Skeleton loader ──────────────────────────────────────── */
@keyframes skeleton-shimmer {
0% { background-position: -400px 0; }
100% { background-position: 400px 0; }
}
.skeleton {
background: linear-gradient(
90deg,
var(--bg-raised) 25%,
var(--bg-overlay) 50%,
var(--bg-raised) 75%
);
background-size: 800px 100%;
animation: skeleton-shimmer 1.4s infinite;
border-radius: var(--radius-md);
}
/* ── Divider ──────────────────────────────────────────────── */
.divider {
height: 1px;
background: var(--bg-border);
margin-block: var(--space-8);
}
/* ── Responsive breakpoints (mobile-first) ────────────────── */
@media (max-width: 767px) {
:root { --header-height: 56px; }
.container { padding-inline: var(--space-4); }
main { padding-top: var(--space-6); }
.toolbar { flex-wrap: wrap; }
}