/* variables.css – CSS Custom Properties (Light & Dark) */

:root {
  /* Layout */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 64px;
  --topbar-height: 60px;

  /* ── Light mode colors ── */
  --app-bg:             #F8FAFC;
  --app-card:           #FFFFFF;
  --app-primary:        #4F46E5;
  --app-primary-hover:  #4338CA;
  --app-primary-subtle: #EEF2FF;
  --app-border:         #E2E8F0;
  --app-text:           #0F172A;
  --app-text-muted:     #64748B;

  /* Sidebar – light mode */
  --sb-bg:              #FFFFFF;
  --sb-border:          #E2E8F0;
  --sb-text:            #475569;
  --sb-text-muted:      #94A3B8;
  --sb-item-hover:      #F1F5F9;
  --sb-item-active:     #EEF2FF;
  --sb-item-active-txt: #4F46E5;
  --sb-brand-text:      #0F172A;

  /* Topbar */
  --topbar-bg:          #FFFFFF;
  --topbar-border:      #E2E8F0;
  --topbar-text:        #0F172A;

  /* Semantic */
  --color-success:   #10B981;
  --color-warning:   #F59E0B;
  --color-danger:    #EF4444;
  --color-info:      #3B82F6;
  --color-purple:    #8B5CF6;

  /* Effects */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -2px rgba(0,0,0,.05);

  /* Radius */
  --radius-sm: .375rem;
  --radius:    .5rem;
  --radius-lg: .75rem;
  --radius-xl: 1rem;

  /* Transition */
  --transition: .2s ease;
  --transition-fast: .12s ease;
}

/* ── Dark mode overrides ── */
[data-bs-theme="dark"] {
  --app-bg:             #0F172A;
  --app-card:           #1E293B;
  --app-primary:        #6366F1;
  --app-primary-hover:  #4F46E5;
  --app-primary-subtle: #1E1B4B;
  --app-border:         #334155;
  --app-text:           #F1F5F9;
  --app-text-muted:     #94A3B8;

  --sb-bg:              #1E293B;
  --sb-border:          rgba(255,255,255,.05);
  --sb-text:            #94A3B8;
  --sb-text-muted:      #475569;
  --sb-brand-text:      #F1F5F9;
  --sb-item-hover:      rgba(255,255,255,.04);
  --sb-item-active:     #6366F1;
  --sb-item-active-txt: #FFFFFF;

  --topbar-bg:          #1E293B;
  --topbar-border:      #334155;
  --topbar-text:        #F1F5F9;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.4);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.5);
}