:root {
    --navy:       #0F172A;
    --navy-light: #1E293B;
    --red:        #DC2626;
    --red-light:  #FEE2E2;
    --slate:      #64748B;
    --slate-light:#CBD5E1;
    --bg:         #F8FAFC;
    --white:      #FFFFFF;
    --success:    #16A34A;
    --warning:    #D97706;
    --border:     #E2E8F0;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--slate-light); border-radius: 3px; }

/* Sidebar transition */
#sidebar { transition: transform 0.25s ease; }

/* Toast */
.toast-enter { animation: slideIn 0.3s ease; }
.toast-leave { animation: slideOut 0.3s ease forwards; }
@keyframes slideIn  { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(120%); opacity: 0; } }

/* Status badges */
.badge-draft    { background: #E2E8F0; color: #334155; }
.badge-sent     { background: #DBEAFE; color: #1D4ED8; }
.badge-accepted { background: #DCFCE7; color: #15803D; }
.badge-rejected { background: #FEE2E2; color: #B91C1C; }
.badge-expired  { background: #FEF9C3; color: #A16207; }

/* Signature canvas */
#signatureCanvas { touch-action: none; cursor: crosshair; }

/* Logo drop zone */
.drop-zone-active { border-color: var(--red) !important; background: var(--red-light) !important; }

/* Table hover */
.table-row:hover { background-color: #F1F5F9; }

/* Alpine cloak */
[x-cloak] { display: none !important; }

/* Spinner */
.spinner {
    border: 3px solid rgba(0,0,0,0.1);
    border-top-color: var(--red);
    border-radius: 50%;
    width: 24px; height: 24px;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Page transition */
.page-content { animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Bulk action bar */
.bulk-bar { transition: all 0.2s ease; }

/* Form focus ring */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #0F172A;
    box-shadow: 0 0 0 2px rgba(15,23,42,0.1);
}

/* Mobile sidebar overlay */
#sidebarOverlay { display: none; }
#sidebarOverlay.active { display: block; }