/* ==========================================
   FusionDrive KB - Design Tokens
   Single source of truth for the admin pages.
   ==========================================
   kb-widget.css deliberately carries its own copy of these values: it is
   injected into third-party pages and must stay self-contained. Keep the
   two in sync when changing the palette.
   ========================================== */

:root {
    /* Surfaces */
    --kb-bg:            #0a0a0a;
    --kb-surface:       #111111;
    --kb-surface-2:     #161616;
    --kb-surface-3:     #1c1c1c;

    /* Brand */
    --kb-gold:          #d4af37;
    --kb-gold-dim:      #a8862b;
    --kb-gold-wash:     rgba(212, 175, 55, 0.10);
    --kb-gold-wash-2:   rgba(212, 175, 55, 0.16);

    /* Hairlines - the primary structural device */
    --kb-line:          rgba(212, 175, 55, 0.12);
    --kb-line-strong:   rgba(212, 175, 55, 0.28);
    --kb-line-neutral:  rgba(255, 255, 255, 0.07);

    /* Text - all pairs verified >= 4.5:1 on --kb-bg */
    --kb-text:          #ededed;
    --kb-text-2:        rgba(255, 255, 255, 0.62);
    --kb-text-3:        rgba(255, 255, 255, 0.42);

    /* Semantic */
    --kb-danger:        #ef4444;
    --kb-danger-text:   #fca5a5;
    --kb-info:          #60a5fa;
    --kb-success:       #86efac;

    /* Spacing - 4pt rhythm */
    --kb-1:  4px;
    --kb-2:  8px;
    --kb-3:  12px;
    --kb-4:  16px;
    --kb-5:  24px;
    --kb-6:  32px;
    --kb-7:  48px;
    --kb-8:  64px;

    /* Radii */
    --kb-r-sm:   8px;
    --kb-r-md:   12px;
    --kb-r-lg:   16px;
    --kb-r-pill: 999px;

    /* Motion */
    --kb-fast:   140ms;
    --kb-normal: 200ms;
    --kb-ease:   cubic-bezier(0.22, 0.61, 0.36, 1);

    /* Elevation */
    --kb-shadow: 0 24px 64px rgba(0, 0, 0, 0.72);

    /* Type */
    --kb-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --kb-track-label: 0.16em;
    --kb-track-title: 0.22em;
}

/* Shared primitives */
.kb-label {
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--kb-track-label);
    color: var(--kb-text-3);
}

.kb-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

:focus-visible {
    outline: 2px solid var(--kb-gold);
    outline-offset: 2px;
    border-radius: var(--kb-r-sm);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}