:root {
    --color-text: #1a1a1a;
    --color-bg: #ffffff;
    --color-muted: #555555;
    --color-link: #2563eb;
    --color-border: #e6e6e6;
    --font-sans: system-ui, sans-serif;
    /* Shared horizontal cap for app shell + marketing sections */
    --layout-max-width: 1400px;
    /* Primary accent — cyan / turquoise (workspace + marketing; admin overrides on .admin-body) */
    --accent: #0891b2;
    --accent-hover: #0e7490;
    --accent-soft: #cffafe;
    /* Focus ring for inputs / controls (paired with --accent) */
    --input-focus-shadow: 0 0 0 3px rgba(8, 145, 178, 0.22);
    /* Semantic helpers (badges, flashes); admin may align via surfaces */
    --color-success: #10b981;
    --color-success-soft: #d1fae5;
    --color-danger: #dc2626;
    --color-danger-soft: #fee2e2;
    /* Logo mark (light surfaces) */
    --brand-mark-bg: var(--accent-soft);
    --brand-mark-fg: var(--accent);
    /* Public layout header (aligned with app top bar) */
    --site-header-bg: #111827;
    --site-header-border: rgba(255, 255, 255, 0.08);
    --site-header-fg: #e5e7eb;
    --site-header-muted: #9ca3af;
}

/* Viewport: reserve the classic vertical scrollbar width so max-width + centered shells do not shift when only page height changes (e.g. long Documents vs short Racks). */
html {
    scrollbar-gutter: stable;
}

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-bg);
}