/* ============================================
   WorkSuite Design Token System v2
   Professional-grade design tokens for enterprise SaaS.
   ============================================ */

:root {
    /* ---- Neutral / Gray Scale ---- */
    --ws-gray-50:  #f8fafc;
    --ws-gray-100: #f1f5f9;
    --ws-gray-200: #e2e8f0;
    --ws-gray-300: #cbd5e1;
    --ws-gray-400: #94a3b8;
    --ws-gray-500: #64748b;
    --ws-gray-600: #475569;
    --ws-gray-700: #334155;
    --ws-gray-800: #1e293b;
    --ws-gray-900: #0f172a;
    --ws-gray-950: #020617;

    /* ---- Brand / Accent - Refined Blue ---- */
    --ws-brand-50:  #eff6ff;
    --ws-brand-100: #dbeafe;
    --ws-brand-200: #bfdbfe;
    --ws-brand-300: #93c5fd;
    --ws-brand-400: #60a5fa;
    --ws-brand-500: #3b82f6;
    --ws-brand-600: #2563eb;
    --ws-brand-700: #1d4ed8;
    --ws-brand-800: #1e40af;
    --ws-brand-900: #1e3a8a;

    /* ---- Semantic Colors ---- */
    --ws-success-50:  #f0fdf4;
    --ws-success-500: #22c55e;
    --ws-success-600: #16a34a;
    --ws-success-700: #15803d;

    --ws-warning-50:  #fffbeb;
    --ws-warning-500: #f59e0b;
    --ws-warning-600: #d97706;
    --ws-warning-700: #b45309;

    --ws-danger-50:   #fef2f2;
    --ws-danger-500:  #ef4444;
    --ws-danger-600:  #dc2626;
    --ws-danger-700:  #b91c1c;

    --ws-info-50:     #f0f9ff;
    --ws-info-500:    #0ea5e9;
    --ws-info-600:    #0284c7;
    --ws-info-700:    #0369a1;

    /* ---- Surface Elevation (Light Mode) ---- */
    --ws-surface-0:  #ffffff;
    --ws-surface-1:  #ffffff;
    --ws-surface-2:  #f8fafc;
    --ws-surface-3:  #f1f5f9;
    --ws-surface-4:  #e2e8f0;
    --ws-surface-5:  #cbd5e1;

    /* ---- Text Hierarchy ---- */
    --ws-text-primary:   #0f172a;
    --ws-text-secondary: #475569;
    --ws-text-tertiary:   #64748b;
    --ws-text-muted:     #94a3b8;

    /* ---- Borders ---- */
    --ws-border-default: #e2e8f0;
    --ws-border-subtle:   #f1f5f9;
    --ws-border-strong:   #cbd5e1;
    --ws-border-focus:    var(--ws-brand-500);

    /* ---- Interactive ---- */
    --ws-interactive-bg:       var(--ws-brand-600);
    --ws-interactive-bg-hover: var(--ws-brand-700);
    --ws-interactive-text:     #ffffff;
    --ws-interactive-border:   transparent;

    /* ---- Semantic Surface Overrides ---- */
    --ws-success-bg:   var(--ws-success-50);
    --ws-success-text: var(--ws-success-700);
    --ws-warning-bg:   var(--ws-warning-50);
    --ws-warning-text: var(--ws-warning-700);
    --ws-danger-bg:    var(--ws-danger-50);
    --ws-danger-text:  var(--ws-danger-700);
    --ws-info-bg:      var(--ws-info-50);
    --ws-info-text:    var(--ws-info-700);

    /* ---- Border Radius Scale ---- */
    --ws-radius-xs:   0.25rem;
    --ws-radius-sm:   0.375rem;
    --ws-radius-md:   0.5rem;
    --ws-radius-lg:   0.75rem;
    --ws-radius-xl:   1rem;
    --ws-radius-2xl:  1.25rem;
    --ws-radius-full: 9999px;

    /* ---- Shadow Scale ---- */
    --ws-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --ws-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --ws-shadow-md: 0 4px 6px rgba(15, 23, 42, 0.05), 0 2px 4px rgba(15, 23, 42, 0.03);
    --ws-shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.06), 0 4px 6px rgba(15, 23, 42, 0.04);
    --ws-shadow-xl: 0 20px 25px rgba(15, 23, 42, 0.08), 0 8px 10px rgba(15, 23, 42, 0.04);
    --ws-shadow-2xl: 0 25px 50px rgba(15, 23, 42, 0.12);

    /* ---- Spacing Scale ---- */
    --ws-space-1:  0.25rem;
    --ws-space-2:  0.5rem;
    --ws-space-3:  0.75rem;
    --ws-space-4:  1rem;
    --ws-space-5:  1.25rem;
    --ws-space-6:  1.5rem;
    --ws-space-8:  2rem;
    --ws-space-10: 2.5rem;
    --ws-space-12: 3rem;
    --ws-space-16: 4rem;

    /* ---- Typography ---- */
    --ws-font-sans: 'Figtree', system-ui, -apple-system, sans-serif;
    --ws-font-mono: 'Figtree Mono', ui-monospace, monospace;

    --ws-text-xs:   0.75rem;
    --ws-text-sm:   0.875rem;
    --ws-text-base: 1rem;
    --ws-text-lg:   1.125rem;
    --ws-text-xl:   1.25rem;
    --ws-text-2xl:  1.5rem;
    --ws-text-3xl:  1.875rem;
    --ws-text-4xl:  2.25rem;

    /* ---- Component Defaults ---- */
    --ws-btn-font-size:    var(--ws-text-sm);
    --ws-btn-font-weight:  600;
    --ws-btn-radius:       var(--ws-radius-md);
    --ws-btn-padding-x:    1rem;
    --ws-btn-padding-y:    0.625rem;
    --ws-btn-padding-y-sm: 0.375rem;
    --ws-btn-transition:   all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    --ws-card-radius:     var(--ws-radius-xl);
    --ws-card-shadow:      var(--ws-shadow-sm);
    --ws-card-padding:     var(--ws-space-5);
    --ws-card-header-pad:  var(--ws-space-4) var(--ws-space-5);
    --ws-card-footer-pad:  var(--ws-space-4) var(--ws-space-5);

    --ws-input-bg:         var(--ws-surface-0);
    --ws-input-border:     var(--ws-border-default);
    --ws-input-radius:     var(--ws-radius-md);
    --ws-input-padding-x:  0.875rem;
    --ws-input-padding-y:  0.625rem;
    --ws-input-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    --ws-badge-font-size:  var(--ws-text-xs);
    --ws-badge-font-weight: 600;
    --ws-badge-radius:     var(--ws-radius-full);
    --ws-badge-padding-x:  0.625rem;
    --ws-badge-padding-y:  0.25rem;

    --ws-table-cell-pad:     var(--ws-space-3) var(--ws-space-4);
    --ws-table-header-bg:    var(--ws-gray-50);
    --ws-table-header-weight: 600;
    --ws-table-border-color: var(--ws-border-subtle);

    /* ---- Sidebar ---- */
    --ws-sidebar-width:        265px;
    --ws-sidebar-compact:      72px;
    --ws-sidebar-bg:           var(--ws-surface-0);
    --ws-sidebar-color:        var(--ws-text-secondary);
    --ws-sidebar-hover-bg:     var(--ws-gray-50);
    --ws-sidebar-active-bg:    var(--ws-brand-50);
    --ws-sidebar-active-color: var(--ws-brand-700);
    --ws-sidebar-border:       var(--ws-border-subtle);
    --ws-sidebar-accent:       var(--ws-brand-500);

    /* ---- Header ---- */
    --ws-header-height:     72px;
    --ws-header-bg:         rgba(255, 255, 255, 0.85);
    --ws-header-blur-bg:    rgba(255, 255, 255, 0.75);
    --ws-header-border:     var(--ws-border-subtle);
    --ws-header-shadow:     var(--ws-shadow-sm);

    /* ---- Footer ---- */
    --ws-footer-bg:     var(--ws-surface-0);
    --ws-footer-border:  var(--ws-border-subtle);

    /* ---- Z-Index Scale ---- */
    --ws-z-dropdown:  1000;
    --ws-z-sticky:    1020;
    --ws-z-fixed:     1030;
    --ws-z-overlay:   1040;
    --ws-z-modal:     1050;
    --ws-z-popover:   1060;
    --ws-z-tooltip:   1070;

    /* ---- Motion ---- */
    --ws-transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --ws-transition-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
    --ws-transition-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Dark Mode Tokens ---- */
[data-theme="dark"],
[data-pc-theme="dark"] {
    --ws-surface-0:  #0f172a;
    --ws-surface-1:  #1e293b;
    --ws-surface-2:  #1a2436;
    --ws-surface-3:  #0f172a;
    --ws-surface-4:  #1e293b;
    --ws-surface-5:  #334155;

    --ws-text-primary:   #f1f5f9;
    --ws-text-secondary:  #cbd5e1;
    --ws-text-tertiary:   #94a3b8;
    --ws-text-muted:     #64748b;

    --ws-border-default: #334155;
    --ws-border-subtle:   #1e293b;
    --ws-border-strong:   #475569;

    --ws-sidebar-bg:      #0f172a;
    --ws-sidebar-color:   #94a3b8;
    --ws-sidebar-hover-bg:#1e293b;
    --ws-sidebar-active-bg: rgba(37, 99, 235, 0.1);
    --ws-sidebar-active-color: var(--ws-brand-400);

    --ws-header-bg:       rgba(15, 23, 42, 0.85);
    --ws-header-blur-bg:  rgba(15, 23, 42, 0.60);
    --ws-header-border:   #1e293b;
    --ws-header-shadow:  0 1px 3px rgba(0, 0, 0, 0.3);

    --ws-card-shadow:     0 1px 3px rgba(0, 0, 0, 0.2);

    --ws-gray-50:  #1e293b;
    --ws-gray-100: #334155;
    --ws-gray-200: #475569;
    --ws-gray-300: #64748b;
}

/* ---- High Contrast Mode ---- */
[data-theme="contrast"],
[data-pc-theme="contrast"] {
    --ws-surface-0:  #ffffff;
    --ws-surface-1:  #ffffff;
    --ws-surface-2:  #f8fafc;
    --ws-surface-3:  #f1f5f9;
    --ws-surface-4:  #e2e8f0;
    --ws-surface-5:  #cbd5e1;

    --ws-text-primary:   #000000;
    --ws-text-secondary:  #111111;
    --ws-text-tertiary:   #333333;
    --ws-text-muted:      #555555;

    --ws-border-default: #000000;
    --ws-border-subtle:   #333333;
    --ws-border-strong:   #000000;
}