/* Base design system — light/dark via [data-theme] on */ /* Light defaults */ :root { --c-bg: #f8fafc; /* background */ --c-card: #ffffff; /* card */ --c-ink: #0f172a; /* text */ --c-muted: #64748b; /* muted text */ --c-primary: #0ea5a4; /* teal/emerald mid */ --c-success: #10b981; --c-warn: #f59e0b; --c-error: #ef4444; --radius: 14px; --shadow: 0 6px 24px rgba(2,6,23,.08); --maxw: 1100px; } /* Dark overrides */ :root[data-theme="dark"] { --c-bg: #0b1220; --c-card: #0f172a; --c-ink: #e2e8f0; --c-muted: #94a3b8; --c-primary: #22d3ee; /* bright cyan-emerald */ } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--c-bg); color: var(--c-ink); font: 16px/1.5 ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .container { max-width: var(--maxw); margin: 0 auto; padding: 1rem; } .page { padding-top: 1rem; padding-bottom: 3rem; } .row { display: flex; align-items: center; } .row.between { justify-content: space-between; } .row.gap { gap: .75rem; } .site-header { position: sticky; top: 0; z-index: 50; background: var(--c-card); border-bottom: 1px solid rgba(2,6,23,.06); box-shadow: 0 2px 12px rgba(2,6,23,.04); } .brand { font-weight: 700; text-decoration: none; color: var(--c-ink); } .topnav .nav-link { text-decoration: none; color: var(--c-ink); opacity: .9; } .topnav .nav-link:hover { opacity: 1; } .site-footer { border-top: 1px solid rgba(2,6,23,.08); background: var(--c-card); } .card { background: var(--c-card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.2rem; } .btn, .btn-secondary, .btn-ghost, .nav-link.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 600; text-decoration: none; cursor: pointer; border-radius: 999px; padding: .6rem 1rem; border: 1px solid transparent; } .btn { background: var(--c-primary); color: #003; } .btn:hover { filter: brightness(0.95); } .btn-secondary { background: transparent; border-color: rgba(2,6,23,.15); color: var(--c-ink); } .btn-secondary:hover { background: rgba(2,6,23,.04); } .btn-ghost { background: transparent; border-color: transparent; color: var(--c-ink); padding: .4rem .6rem; } .badge { display: inline-block; background: rgba(16,185,129,.15); color: var(--c-ink); border: 1px solid rgba(16,185,129,.25); border-radius: 999px; padding: .2rem .6rem; font-size: .8rem; } .table { width: 100%; border-collapse: collapse; } .table th, .table td { padding: .6rem .75rem; border-bottom: 1px solid rgba(2,6,23,.08); } .table thead th { position: sticky; top: 0; background: var(--c-card); color: var(--c-ink); font-weight: 700; } label { display:block; margin:.5rem 0 .25rem; } input[type="text"], input[type="email"], input[type="password"], select { width: 100%; padding: .6rem .75rem; border-radius: 10px; border: 1px solid rgba(2,6,23,.2); background: var(--c-card); color: var(--c-ink); } .alert { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3); padding: .75rem 1rem; border-radius: 12px; margin-bottom: 1rem; } .alert-error { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); } .muted { color: var(--c-muted); } .small { font-size: .9rem; } /* CSS Document */