/* Bookmarks Glance design tokens: the ONLY place colors, type, spacing, radius live.
   Linked by extension/newtab.html AND index.html. See DESIGN.md. */
:root {
    /* Color: dark (default) */
    --bg-color: #121212;
    --column-bg: #1e1e1e;
    --text-color: #e0e0e0;
    --text-muted: #a0a0a0;
    --border-color: #333;
    --accent: #005fb8;          /* fills: buttons, selection. Must equal APP.defaults.selectionColor (sync.js checks) */
    --accent-hover: #0a72d6;
    --accent-text: #6cb2ff;     /* accent used as text/links on dark surfaces */
    --on-accent: #fff;
    --success: #34d399;

    /* Legacy names used by newtab.css; the extension lets users override --selected-bg at runtime */
    --selected-bg: var(--accent);
    --selected-text: var(--on-accent);
    --hover-bg: color-mix(in srgb, var(--selected-bg) 14%, transparent);
    --social-icon-filter: invert(1);

    /* Type: system fonts only (no web-font requests; extension is offline-first) */
    --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Consolas, monospace;
    --text-xs: 12px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: 32px;
    --text-2xl: 48px;

    /* Space (4px base), radius, motion */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --ease: 150ms ease;
}

body[data-theme='light'] {
    --bg-color: #f5f7fb;
    --column-bg: #ffffff;
    --text-color: #1e293b;
    --text-muted: #5b6472;
    --border-color: #d7dee8;
    --accent-text: #005fb8;
    --success: #059669;
    --social-icon-filter: none;
}