/**
 * NorthStar SwitchBoard — Design Token System
 *
 * Enterprise-grade CSS custom property definitions.
 * These tokens layer alongside assets/twilio-flex-theme.css for backward compatibility.
 * Override tokens via tenant_branding DB values (injected by branding_engine.php).
 *
 * @package NorthStarSwitchBoard
 * @since   Phase 1 Enterprise
 */

/* ============================================================
   SPACING SCALE
   ============================================================ */
:root {
    --ns-space-0:   0;
    --ns-space-1:   4px;
    --ns-space-2:   8px;
    --ns-space-3:   12px;
    --ns-space-4:   16px;
    --ns-space-5:   20px;
    --ns-space-6:   24px;
    --ns-space-8:   32px;
    --ns-space-10:  40px;
    --ns-space-12:  48px;
    --ns-space-16:  64px;

    /* ============================================================
       TYPOGRAPHY
       ============================================================ */
    --ns-font-sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ns-font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

    --ns-text-xs:   12px;
    --ns-text-sm:   13px;
    --ns-text-base: 14px;   /* enterprise compact base */
    --ns-text-md:   15px;
    --ns-text-lg:   16px;
    --ns-text-xl:   18px;
    --ns-text-2xl:  24px;

    --ns-font-normal:   400;
    --ns-font-medium:   500;
    --ns-font-semibold: 600;
    --ns-font-bold:     700;

    --ns-leading-tight:  1.25;
    --ns-leading-snug:   1.375;
    --ns-leading-normal: 1.5;
    --ns-leading-relaxed:1.625;

    /* ============================================================
       BORDER RADIUS
       ============================================================ */
    --ns-radius-sm:   6px;
    --ns-radius-md:   8px;
    --ns-radius-lg:   12px;
    --ns-radius-xl:   16px;
    --ns-radius-2xl:  24px;
    --ns-radius-full: 9999px;

    /* ============================================================
       SHADOWS  (enterprise: subtle, not playful)
       ============================================================ */
    --ns-shadow-xs:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --ns-shadow-sm:   0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
    --ns-shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --ns-shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --ns-shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    --ns-shadow-ring: 0 0 0 3px rgba(37, 99, 235, 0.25);

    /* ============================================================
       TRANSITIONS
       ============================================================ */
    --ns-ease:            cubic-bezier(0.4, 0, 0.2, 1);
    --ns-duration-fast:   100ms;
    --ns-duration-normal: 200ms;
    --ns-duration-slow:   300ms;

    /* ============================================================
       Z-INDEX SCALE
       ============================================================ */
    --ns-z-dropdown: 1000;
    --ns-z-sticky:   1020;
    --ns-z-fixed:    1030;
    --ns-z-modal-bg: 1040;
    --ns-z-modal:    1050;
    --ns-z-popover:  1060;
    --ns-z-tooltip:  1070;
    --ns-z-toast:    1080;
}

/* ============================================================
   LIGHT THEME
   ============================================================ */
:root,
[data-theme="light"] {
    /* Surfaces */
    --ns-bg-app:      #f8fafc;
    --ns-bg-surface:  #ffffff;
    --ns-bg-elevated: #ffffff;
    --ns-bg-sunken:   #f1f5f9;
    --ns-bg-hover:    #f8fafc;
    --ns-bg-active:   #f1f5f9;
    --ns-bg-selected: #eff6ff;

    /* Borders */
    --ns-border:        #e2e8f0;
    --ns-border-strong: #cbd5e1;
    --ns-border-focus:  #2563eb;

    /* Text hierarchy */
    --ns-text-primary:   #0f172a;
    --ns-text-secondary: #475569;
    --ns-text-tertiary:  #94a3b8;
    --ns-text-disabled:  #cbd5e1;
    --ns-text-inverse:   #ffffff;
    --ns-text-link:      #2563eb;

    /* Brand colors (blue-based) */
    --ns-brand-50:  #eff6ff;
    --ns-brand-100: #dbeafe;
    --ns-brand-200: #bfdbfe;
    --ns-brand-300: #93c5fd;
    --ns-brand-400: #60a5fa;
    --ns-brand-500: #3b82f6;
    --ns-brand-600: #2563eb;
    --ns-brand-700: #1d4ed8;

    /* Semantic — success */
    --ns-success-bg:     #f0fdf4;
    --ns-success-border: #bbf7d0;
    --ns-success-text:   #15803d;
    --ns-success-solid:  #16a34a;

    /* Semantic — warning */
    --ns-warning-bg:     #fffbeb;
    --ns-warning-border: #fde68a;
    --ns-warning-text:   #92400e;
    --ns-warning-solid:  #d97706;

    /* Semantic — danger */
    --ns-danger-bg:     #fef2f2;
    --ns-danger-border: #fecaca;
    --ns-danger-text:   #b91c1c;
    --ns-danger-solid:  #dc2626;

    /* Semantic — info */
    --ns-info-bg:     #eff6ff;
    --ns-info-border: #bfdbfe;
    --ns-info-text:   #1e40af;
    --ns-info-solid:  #2563eb;

    /* Sidebar */
    --ns-sidebar-bg:          #0f172a;
    --ns-sidebar-bg-hover:    #1e293b;
    --ns-sidebar-bg-active:   #1e3a5f;
    --ns-sidebar-border:      #1e293b;
    --ns-sidebar-text:        #94a3b8;
    --ns-sidebar-text-active: #ffffff;
    --ns-sidebar-icon:        #64748b;
    --ns-sidebar-icon-active: #60a5fa;
}

/* ============================================================
   DARK THEME
   ============================================================ */
[data-theme="dark"] {
    /* Surfaces */
    --ns-bg-app:      #0a0f1a;
    --ns-bg-surface:  #111827;
    --ns-bg-elevated: #1f2937;
    --ns-bg-sunken:   #06090f;
    --ns-bg-hover:    #1f2937;
    --ns-bg-active:   #273549;
    --ns-bg-selected: #1e3a5f;

    /* Borders */
    --ns-border:        #1f2937;
    --ns-border-strong: #374151;
    --ns-border-focus:  #3b82f6;

    /* Text hierarchy */
    --ns-text-primary:   #f1f5f9;
    --ns-text-secondary: #94a3b8;
    --ns-text-tertiary:  #4b5563;
    --ns-text-disabled:  #374151;
    --ns-text-inverse:   #0f172a;
    --ns-text-link:      #60a5fa;

    /* Semantic — success */
    --ns-success-bg:     #052e16;
    --ns-success-border: #166534;
    --ns-success-text:   #4ade80;
    --ns-success-solid:  #16a34a;

    /* Semantic — warning */
    --ns-warning-bg:     #2d1b00;
    --ns-warning-border: #854d0e;
    --ns-warning-text:   #fbbf24;
    --ns-warning-solid:  #d97706;

    /* Semantic — danger */
    --ns-danger-bg:     #2d0a0a;
    --ns-danger-border: #991b1b;
    --ns-danger-text:   #f87171;
    --ns-danger-solid:  #dc2626;

    /* Semantic — info */
    --ns-info-bg:     #0c1a3a;
    --ns-info-border: #1e40af;
    --ns-info-text:   #93c5fd;
    --ns-info-solid:  #3b82f6;

    /* Sidebar */
    --ns-sidebar-bg:          #060d1b;
    --ns-sidebar-bg-hover:    #0f172a;
    --ns-sidebar-bg-active:   #1e3a5f;
    --ns-sidebar-border:      #0f172a;
    --ns-sidebar-text:        #64748b;
    --ns-sidebar-text-active: #f1f5f9;
    --ns-sidebar-icon:        #475569;
    --ns-sidebar-icon-active: #60a5fa;
}

/* Dark mode additional overrides */
[data-theme="dark"] {
    --ns-modal-bg:       #1f2937;
    --ns-input-bg:       #111827;
    --ns-dropdown-bg:    #1f2937;
    --ns-toast-bg:       #1f2937;
    --ns-focus-ring:     rgba(59, 130, 246, 0.5);
}