/* ============================================
   NODEBLUE DESIGN TOKENS
   ============================================
   Nodeblue Design System v1.3
   Dark-first. Role-based colour system.
   ============================================ */

:root {
    /* Foundation colours (structure) */
    --nb-bg-root:    #0E1424;
    --nb-bg-layer-1: #131B30;
    --nb-bg-layer-2: #18213A;
    --nb-border-subtle: #243056;

    /* Content colours (text) */
    --nb-text-primary:   #E6EBF5;
    --nb-text-secondary: #B4BDD6;
    --nb-text-muted:     #7E88A8;
    --nb-text-disabled:  #55607E;
    --nb-text-on-accent: #FFFFFF;

    /* Accent colours (Nodeblue blue) */
    --nb-accent-primary: #2563EB;
    --nb-accent-hover:   #3B82F6;
    --nb-accent-active:  #1D4ED8;
    --nb-accent-soft:    #1E3A8A;
    --nb-accent-glow:    rgba(37, 99, 235, 0.35);

    /* Violet accent (controlled use — brand differentiation) */
    --nb-violet-hint:   #7C3AED;
    --nb-violet-soft:   rgba(124, 58, 237, 0.15);
    --nb-violet-border: rgba(124, 58, 237, 0.4);

    /* Blue-violet gradient (primary action buttons) */
    --nb-gradient-start: #2563EB;
    --nb-gradient-end:   #4F46E5;
    --nb-gradient-hover-start: #3B82F6;
    --nb-gradient-hover-end:   #6366F1;
    --nb-gradient-active-start: #1D4ED8;
    --nb-gradient-active-end:   #4338CA;

    /* Accent surface tints */
    --nb-accent-tint-subtle: rgba(37, 99, 235, 0.08);
    --nb-accent-tint-soft:   rgba(37, 99, 235, 0.12);
    --nb-accent-tint-medium: rgba(37, 99, 235, 0.18);
    --nb-accent-tint-strong: rgba(37, 99, 235, 0.25);
    --nb-accent-border-soft:   rgba(37, 99, 235, 0.25);
    --nb-accent-border-medium: rgba(37, 99, 235, 0.4);
    --nb-accent-border-strong: rgba(37, 99, 235, 0.6);
    --nb-accent-text-tint:     rgba(147, 197, 253, 0.92);

    /* Overlay colours */
    --nb-overlay-subtle: rgba(255, 255, 255, 0.05);
    --nb-overlay-soft:   rgba(255, 255, 255, 0.08);
    --nb-overlay-medium: rgba(255, 255, 255, 0.12);
    --nb-overlay-strong: rgba(255, 255, 255, 0.15);
    --nb-overlay-border: rgba(255, 255, 255, 0.12);

    /* Muted surfaces */
    --nb-muted-border-subtle: rgba(126, 136, 168, 0.12);
    --nb-muted-border-soft:   rgba(126, 136, 168, 0.25);
    --nb-muted-border-medium: rgba(126, 136, 168, 0.4);
    --nb-muted-scrollbar:       rgba(126, 136, 168, 0.35);
    --nb-muted-scrollbar-hover: rgba(126, 136, 168, 0.55);
    --nb-muted-icon:            rgba(126, 136, 168, 0.7);

    /* State colours */
    --nb-state-success: #2563EB;
    --nb-state-warning: #D6A645;
    --nb-state-error:   #D16464;
    --nb-state-neutral: #6B728E;

    /* State surfaces */
    --nb-surface-success: #0F1D2D;
    --nb-surface-warning: #1D1A14;
    --nb-surface-error:   #1D1416;

    /* Interactive surfaces */
    --nb-interactive-surface:        rgba(37, 99, 235, 0.12);
    --nb-interactive-surface-hover:  rgba(37, 99, 235, 0.18);
    --nb-interactive-surface-subtle: rgba(37, 99, 235, 0.06);
    --nb-interactive-border:         rgba(37, 99, 235, 0.25);
    --nb-dark-surface:        #0A0F1A;
    --nb-dark-surface-medium: #0C1220;
    --nb-dark-surface-subtle: #0E1424;

    /* Error tints */
    --nb-error-border-soft:    rgba(209, 100, 100, 0.25);
    --nb-error-border-medium:  rgba(209, 100, 100, 0.4);
    --nb-error-text-muted:     rgba(209, 100, 100, 0.7);
    --nb-error-text-strong:    #D16464;
    --nb-error-surface-subtle: rgba(209, 100, 100, 0.06);
    --nb-error-surface-soft:   rgba(209, 100, 100, 0.1);
    --nb-error-surface-medium: rgba(209, 100, 100, 0.15);
    --nb-error-glow:           rgba(209, 100, 100, 0.25);

    /* Shadows */
    --nb-shadow-1: 0 1px 3px rgba(0,0,0,0.3);
    --nb-shadow-2: 0 4px 12px rgba(0,0,0,0.4);
    --nb-shadow-3: 0 8px 24px rgba(0,0,0,0.5);
    --nb-shadow-accent: 0 4px 14px rgba(37, 99, 235, 0.35);

    /* Spacing scale */
    --nb-space-xs: 4px;
    --nb-space-sm: 8px;
    --nb-space-md: 16px;
    --nb-space-lg: 24px;
    --nb-space-xl: 32px;
    --nb-space-2xl: 48px;

    /* Touch targets */
    --nb-touch-target: 44px;

    /* Radius scale */
    --nb-radius-sm: 4px;
    --nb-radius-md: 8px;
    --nb-radius-lg: 12px;
    --nb-radius-xl: 16px;

    /* Transitions */
    --nb-transition-fast:   0.15s ease;
    --nb-transition-normal: 0.25s ease;
}