/*
 * DataBytes Design Tokens
 * Edit this file to rebrand a project. Do not hardcode these values elsewhere.
 */

:root {
    /* ── Brand ─────────────────────────────────────────── */
    --db-primary:               #1a56b0;
    --db-primary-hover:         #1443a0;
    --db-primary-light:         #e8f0fc;

    /* ── Semantic colours ──────────────────────────────── */
    --db-success:               #15803d;
    --db-success-light:         #dcfce7;
    --db-warning:               #c2790a;
    --db-warning-light:         #fef3c7;
    --db-danger:                #dc2626;
    --db-danger-light:          #fee2e2;
    --db-info:                  #0284c7;
    --db-info-light:            #e0f2fe;

    /* ── Backgrounds ───────────────────────────────────── */
    --db-bg:                    #f1f5f9;
    --db-surface:               #ffffff;
    --db-surface-muted:         #f8fafc;

    /* ── Borders ───────────────────────────────────────── */
    --db-border:                #e2e8f0;
    --db-border-strong:         #cbd5e1;

    /* ── Text ──────────────────────────────────────────── */
    --db-text:                  #0f172a;
    --db-text-secondary:        #475569;
    --db-text-muted:            #94a3b8;

    /* ── Sidebar ───────────────────────────────────────── */
    --db-sidebar-bg:            #1e293b;
    --db-sidebar-text:          #94a3b8;
    --db-sidebar-text-hover:    #f1f5f9;
    --db-sidebar-active-bg:     rgba(26, 86, 176, 0.22);
    --db-sidebar-active-text:   #60a5fa;
    --db-sidebar-divider:       rgba(255, 255, 255, 0.07);
    --db-sidebar-width:         240px;
    --db-sidebar-collapsed:     52px;

    /* ── Topbar ────────────────────────────────────────── */
    --db-topbar-bg:             #ffffff;
    --db-topbar-border:         #e2e8f0;
    --db-topbar-height:         54px;

    /* ── Spacing (8 px base) ───────────────────────────── */
    --db-space-1:               4px;
    --db-space-2:               8px;
    --db-space-3:               12px;
    --db-space-4:               16px;
    --db-space-5:               24px;
    --db-space-6:               32px;

    /* ── Border radii ──────────────────────────────────── */
    --db-radius-sm:             4px;
    --db-radius:                6px;
    --db-radius-lg:             10px;

    /* ── Shadows ───────────────────────────────────────── */
    --db-shadow-xs:             0 1px 2px rgba(0, 0, 0, 0.06);
    --db-shadow-sm:             0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
    --db-shadow:                0 4px 12px rgba(0, 0, 0, 0.08);
    --db-shadow-lg:             0 8px 24px rgba(0, 0, 0, 0.10);

    /* ── Controls ──────────────────────────────────────── */
    --db-control-height-sm:     28px;
    --db-control-height:        34px;
    --db-control-height-lg:     42px;

    /* ── Transitions ───────────────────────────────────── */
    --db-transition-fast:       140ms ease;
    --db-transition:            220ms ease;

    /* ── Typography ────────────────────────────────────── */
    --db-font:                  Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --db-font-mono:             "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --db-font-size-xs:          0.75rem;
    --db-font-size-sm:          0.8125rem;
    --db-font-size:             0.875rem;
    --db-font-size-lg:          1rem;
    --db-line-height:           1.5;
}