/* ============================================================
Sistem Presensi PT Amanda Cakra Persada - Modern UI Design
Primary: Brand Red #E6232E | Accent: Rose #F43F5E
Success: Emerald #059669 | Warning: Amber #D97706 | Danger: Red #DC2626
============================================================ */
:root {
/* Brand (sama di kedua mode) */
--brand-primary: #E6232E;
--brand-dark: #B91C1C;
--brand-light: #FEE2E2;
--brand-accent: #F43F5E;
/* Light mode tokens (default) */
--text-dark: #1E293B;
--text-muted: #64748B;
--text-light: #94A3B8;
--bg-light: #F8FAFC;
--bg-white: #FFFFFF;
--border-color: #E2E8F0;
--success: #059669;
--success-light: #D1FAE5;
--warning: #D97706;
--warning-light: #FEF3C7;
--danger: #DC2626;
--danger-light: #FEE2E2;
--info: #0EA5E9;
--info-light: #E0F2FE;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);
--shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.05);
--radius: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
--transition: all 0.15s ease;
color-scheme: light;
}
/* ============================================================
DARK MODE TOKENS
Auto-detect via prefers-color-scheme, override-able with
or .
============================================================ */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--brand-light: rgba(230, 35, 46, 0.18);
--text-dark: #F1F5F9;
--text-muted: #94A3B8;
--text-light: #64748B;
--bg-light: #0F172A;
--bg-white: #1E293B;
--border-color: #334155;
--success-light: rgba(5, 150, 105, 0.18);
--warning-light: rgba(217, 119, 6, 0.20);
--danger-light: rgba(220, 38, 38, 0.18);
--info-light: rgba(14, 165, 233, 0.18);
--shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.45), 0 2px 4px -2px rgba(0,0,0,0.40);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.50), 0 4px 6px -4px rgba(0,0,0,0.40);
--shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.55), 0 8px 10px -6px rgba(0,0,0,0.45);
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--brand-light: rgba(230, 35, 46, 0.18);
--text-dark: #F1F5F9;
--text-muted: #94A3B8;
--text-light: #64748B;
--bg-light: #0F172A;
--bg-white: #1E293B;
--border-color: #334155;
--success-light: rgba(5, 150, 105, 0.18);
--warning-light: rgba(217, 119, 6, 0.20);
--danger-light: rgba(220, 38, 38, 0.18);
--info-light: rgba(14, 165, 233, 0.18);
--shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.45), 0 2px 4px -2px rgba(0,0,0,0.40);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.50), 0 4px 6px -4px rgba(0,0,0,0.40);
--shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.55), 0 8px 10px -6px rgba(0,0,0,0.45);
color-scheme: dark;
}
* {
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 15px;
line-height: 1.6;
color: var(--text-dark);
background-color: var(--bg-light);
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
a {
color: var(--brand-primary);
text-decoration: none;
transition: var(--transition);
}
a:hover {
color: var(--brand-dark);
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
color: var(--text-dark);
font-weight: 600;
letter-spacing: -0.02em;
}
/* ============================================================
BUTTONS
============================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 20px;
font-size: 14px;
font-weight: 500;
text-align: center;
border: none;
border-radius: var(--radius-lg);
cursor: pointer;
transition: var(--transition);
text-decoration: none;
line-height: 1.5;
}
.btn:hover {
text-decoration: none;
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn:active {
transform: translateY(0);
}
.btn-primary {
background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
color: #fff;
}
.btn-primary:hover {
background: linear-gradient(135deg, var(--brand-dark), #E11D48);
color: #fff;
}
.btn-success {
background: linear-gradient(135deg, var(--success), #059669);
color: #fff;
}
.btn-success:hover {
background: linear-gradient(135deg, #059669, #047857);
color: #fff;
}
.btn-warning {
background: var(--warning);
color: #fff;
}
.btn-danger {
background: linear-gradient(135deg, var(--danger), #DC2626);
color: #fff;
}
.btn-danger:hover {
background: linear-gradient(135deg, #DC2626, #B91C1C);
color: #fff;
}
.btn-info {
background: linear-gradient(135deg, var(--info), #0891B2);
color: #fff;
}
.btn-secondary {
background: #F1F5F9;
color: var(--text-dark);
border: 1px solid var(--border-color);
}
.btn-secondary:hover {
background: #E2E8F0;
color: var(--text-dark);
}
.btn-outline {
background: transparent;
border: 1.5px solid var(--brand-primary);
color: var(--brand-primary);
}
.btn-outline:hover {
background: var(--brand-light);
color: var(--brand-dark);
}
.btn-sm {
padding: 6px 12px;
font-size: 12px;
border-radius: var(--radius);
min-height: 32px;
}
/* Touch target compliance on small/touch screens */
@media (max-width: 768px), (pointer: coarse) {
.btn-sm {
min-height: 40px;
padding: 8px 14px;
}
}
.btn-lg {
padding: 14px 28px;
font-size: 16px;
}
.btn-block {
display: flex;
width: 100%;
}
/* ============================================================
FORMS
============================================================ */
.form-group {
margin-bottom: 16px;
}
.form-group label {
display: block;
margin-bottom: 6px;
font-weight: 500;
color: var(--text-dark);
font-size: 13px;
}
/* Required field indicator: * next to label text,
or add class "required" on the