/*
 * BlazorToolkit Default Theme
 *
 * All component styles reference --btk-* variables.
 * Override these in your app to match your existing theme.
 *
 * Example — map to Bootstrap:
 *   :root {
 *     --btk-primary: var(--bs-primary);
 *     --btk-font-family: var(--bs-body-font-family);
 *   }
 *
 * Example — dark mode:
 *   [data-theme="dark"] {
 *     --btk-bg: #1e1e2e;
 *     --btk-bg-surface: #2a2a3c;
 *     --btk-text: #cdd6f4;
 *     ...
 *   }
 */

:root {
    /* === Base === */
    --btk-font-family: inherit;
    --btk-font-family-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    --btk-font-size-xs: 0.65rem;
    --btk-font-size-sm: 0.75rem;
    --btk-font-size-base: 0.8125rem;
    --btk-font-size-md: 0.875rem;
    --btk-line-height: 1.5;
    --btk-radius: 6px;
    --btk-radius-sm: 4px;
    --btk-radius-lg: 8px;
    --btk-transition: 0.15s ease;

    /* === Colors === */
    --btk-primary: #3b82f6;
    --btk-primary-hover: #2563eb;
    --btk-primary-light: #eff6ff;
    --btk-primary-border: #93c5fd;

    --btk-danger: #dc2626;
    --btk-danger-light: #fef2f2;
    --btk-danger-border: #fca5a5;
    --btk-danger-dark: #991b1b;

    --btk-success: #16a34a;
    --btk-success-light: #dcfce7;

    /* === Surfaces === */
    --btk-bg: #fff;
    --btk-bg-surface: #f9fafb;
    --btk-bg-muted: #f1f5f9;
    --btk-bg-inset: #fafafa;

    /* === Text === */
    --btk-text: #111827;
    --btk-text-strong: #0f172a;
    --btk-text-label: #374151;
    --btk-text-muted: #6b7280;
    --btk-text-faint: #94a3b8;

    /* === Borders === */
    --btk-border: #d1d5db;
    --btk-border-light: #e5e7eb;
    --btk-border-focus: var(--btk-primary);
    --btk-focus-ring: rgba(59, 130, 246, 0.1);

    /* === Code / Raw editor === */
    --btk-code-bg: #1e1e2e;
    --btk-code-text: #cdd6f4;

    /* === Tree view type colors === */
    --btk-type-object-bg: #dbeafe;
    --btk-type-object-text: #1d4ed8;
    --btk-type-array-bg: #fce7f3;
    --btk-type-array-text: #be185d;
    --btk-type-string-bg: #dcfce7;
    --btk-type-string-text: #166534;
    --btk-type-number-bg: #fef3c7;
    --btk-type-number-text: #92400e;
    --btk-type-bool-bg: #e0e7ff;
    --btk-type-bool-text: #3730a3;
    --btk-type-null-bg: #f1f5f9;
    --btk-type-null-text: #94a3b8;

    /* === Selection === */
    --btk-selected-bg: #eff6ff;
    --btk-selected-border: #bfdbfe;
    --btk-hover-bg: #f1f5f9;
}