:root{
  --color-primary:#B22222;
  --color-dark:#333333;
  --color-light:#F5F5F5;
  --skel:#e5e7eb;
}
html,body{height:100%;}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans';
     background:var(--color-light); color:var(--color-dark);}
.navbar{ background-color: var(--color-primary) !important; }
.navbar .nav-link,.navbar .navbar-brand{ color:#fff !important; }
.navbar-toggler-icon{ filter: invert(1); }
.card{ transition: transform .2s ease; }
.card:hover{ transform: translateY(-3px); }
footer{ background:#333; color:#ccc; padding:2rem 0; margin-top:2rem; }

/* Skeleton blocks */
.skel{ display:block; background:var(--skel); border-radius:8px; }
.s-12{ height:12px; } .s-16{ height:16px; } .s-20{ height:20px; }
.s-24{ height:24px; } .s-32{ height:32px; } .s-40{ height:40px; }
.w-25{ width:25%; } .w-33{ width:33%; } .w-50{ width:50%; }
.w-66{ width:66%; } .w-75{ width:75%; } .w-100{ width:100%; }
.mb-1{ margin-bottom:.25rem; } .mb-2{ margin-bottom:.5rem; }
.mb-3{ margin-bottom:1rem; } .mb-4{ margin-bottom:1.5rem; }