/*
 * Shared design tokens extracted from the current site.
 * Breakpoints: 768px (mobile), 1024px (desktop navigation), 1280px (wide content).
 */
:root {
    /* Color */
    --color-bg: #0d1117;
    --color-surface: #161b22;
    --color-surface-alt: #1c2128;
    --color-text: #e6edf3;
    --color-text-muted: #8b949e;
    --color-border: #30363d;
    --color-accent: #10b981;
    --color-accent-contrast: #0d1117;
    --color-brand-navy: #0f172a;
    --color-brand-teal: #0d9488;
    --color-brand-cyan: #06b6d4;
    --color-brand-lime: #84cc16;
    --color-brand-white: #f8fafc;
    --color-brand-slate: #64748b;
    --color-accent-rgb: 16, 185, 129;
    --color-info: #58a6ff;
    --color-warning: #fbbf24;
    --color-danger: #ff7b72;
    --color-success: #10b981;
    --color-code-bg: #0d1117;
    --color-code-text: #e2e8f0;
    --color-doc-heading: #374151;
    --color-doc-heading-dark: #d1d5db;
    --color-doc-muted: #6b7280;
    --color-doc-muted-dark: #9ca3af;
    --color-doc-border: #e5e7eb;
    --color-doc-border-dark: #4b5563;
    --color-doc-surface: #f9fafb;
    --color-doc-surface-dark: #374151;
    --color-doc-scrollbar: #d1d5db;
    --color-doc-scrollbar-dark: #4b5563;
    --color-doc-highlight: rgba(16, 185, 129, 0.1);
    --color-doc-highlight-subtle: rgba(16, 185, 129, 0.05);
    --shadow-doc-image: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

    /* Existing palette aliases */
    --primary: var(--color-accent);
    --primary-dark: #059669;
    --primary-light: #34d399;
    --bg: var(--color-bg);
    --bg-alt: var(--color-surface);
    --bg-elevated: var(--color-surface-alt);
    --text: var(--color-text);
    --text-light: var(--color-text-muted);
    --text-muted: #6e7681;
    --border: var(--color-border);
    --border-hover: #484f58;
    --code-bg: var(--color-code-bg);
    --code-border: var(--color-border);
    --accent-blue: var(--color-info);
    --accent-purple: #bc8cff;
    --accent-yellow: var(--color-warning);

/* Typography */
--font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, monospace;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 2.5rem;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
--line-height-tight: 1.2;
--line-height-base: 1.6;

    /* Layout */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 10px 30px rgba(16, 185, 129, 0.1);
    --shadow-card: 0 14px 32px -22px rgba(0, 0, 0, 0.9);
    --shadow-card-hover: 0 22px 42px -24px rgba(16, 185, 129, 0.42);
    --glow-card: rgba(16, 185, 129, 0.16);
    --transition-fast: 180ms ease;
    --transition-base: 260ms cubic-bezier(0.22, 1, 0.36, 1);
    --transition-slow: 420ms cubic-bezier(0.22, 1, 0.36, 1);
    --content-width: 1200px;
    --z-nav: 100;
    --z-banner: 101;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
}