*,
::before,
::after {
	box-sizing: border-box;
}

html {
	font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	tab-size: 4;
}

body {
	margin: 0;
	background-color: var(--bg);
	color: var(--text);
	padding: 2rem 1rem;
}

b, strong {
	font-weight: bolder;
}

code, kbd, samp, pre, .code {
	font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: 1em;
}

small {
	font-size: 80%;
}

sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

table {
	border-color: currentcolor;
}

button, input, optgroup, select, textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

button, [type='button'], [type='reset'], [type='submit'] {
	-webkit-appearance: button;
}

legend {
	padding: 0;
}

progress {
	vertical-align: baseline;
}

::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
	height: auto;
}

[type='search'] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

::-webkit-search-decoration {
	-webkit-appearance: none;
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

summary {
	display: list-item;
}

:root {
	--alert: rgb(218, 30, 40);
    --warning: rgb(255, 131, 43);
    --success: rgb(36, 161, 72);
    --primary: rgb(15, 98, 254);
    --content-width: 760px;

    /* Light mode colors */
    --bg: rgb(255, 255, 255);
    --bg-secondary: rgb(248, 249, 250);
    --text: rgb(33, 37, 41);
    --text-secondary: rgb(108, 117, 125);
    --border: rgb(222, 226, 230);
    --border-hover: rgb(173, 181, 189);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Dark mode colors */
        --bg: rgb(13, 17, 23);
        --bg-secondary: rgb(22, 27, 34);
        --text: rgb(240, 246, 252);
        --text-secondary: rgb(139, 148, 158);
        --border: rgb(48, 54, 61);
        --border-hover: rgb(110, 118, 129);
    }
}

.container {
	max-width: var(--content-width);
	margin: 0 auto;
}

section {
    padding-bottom: 1rem;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    margin-top: 0;
    margin-bottom: 1rem;
}

p {
    margin-bottom: 1rem;
}

/* Forms */
input, textarea, select {
    background-color: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.75rem;
    font-size: 1rem;
    width: 100%;
    transition: border-color 0.2s ease;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--primary);
}

input:hover, textarea:hover, select:hover {
    border-color: var(--border-hover);
}

input[type="checkbox"], input[type="radio"] {
    width: auto;
    margin-right: 0.5rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text);
    font-weight: 500;
}

fieldset {
    border: 1px solid var(--border);
    padding: 1rem;
    margin-bottom: 1rem;
}

legend {
    color: var(--text);
    font-weight: 600;
    padding: 0 0.5rem;
}

/* Buttons */
button, .btn {
    background-color: var(--primary);
    border: 1px solid var(--primary);
    color: white;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

button:hover, .btn:hover {
    background-color: rgb(13, 82, 214);
    border-color: rgb(13, 82, 214);
}

button:disabled, .btn:disabled {
    background-color: var(--border);
    border-color: var(--border);
    color: var(--text-secondary);
    cursor: not-allowed;
}

.btn-secondary {
    background-color: var(--bg-secondary);
    border-color: var(--border);
    color: var(--text);
}

.btn-secondary:hover {
    background-color: var(--border);
    border-color: var(--border-hover);
}

.btn-danger {
    background-color: var(--alert);
    border-color: var(--alert);
}

.btn-danger:hover {
    background-color: rgb(178, 25, 33);
    border-color: rgb(178, 25, 33);
}

.btn-success {
    background-color: var(--success);
    border-color: var(--success);
}

.btn-success:hover {
    background-color: rgb(30, 135, 60);
    border-color: rgb(30, 135, 60);
}

.text-primary {
    color: var(--primary);
}

.text-secondary {
    color: var(--text-secondary);
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    background-color: var(--bg);
}

th, td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

th {
    background-color: var(--bg-secondary);
    font-weight: 600;
    color: var(--text);
}

tr:hover {
    background-color: var(--bg-secondary);
}

/* Code */
code, pre {
    background-color: var(--bg-secondary);
    color: var(--text);
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border);
}

pre {
    padding: 1rem;
    overflow-x: auto;
}

pre code {
    background: none;
    border: none;
    padding: 0;
}

/* Alerts */
.alert {
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}

.alert-primary {
    background-color: rgba(15, 98, 254, 0.1);
    border-color: var(--primary);
    color: var(--primary);
}

.alert-success {
    background-color: rgba(36, 161, 72, 0.1);
    border-color: var(--success);
    color: var(--success);
}

.alert-warning {
    background-color: rgba(255, 131, 43, 0.1);
    border-color: var(--warning);
    color: var(--warning);
}

.alert-danger {
    background-color: rgba(218, 30, 40, 0.1);
    border-color: var(--alert);
    color: var(--alert);
}

/* Links */
a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }