:root {
    --text-xs: clamp(0.7rem, 1.5vmin, 0.875rem);
    --text-sm: clamp(0.8rem, 1.8vmin, 1rem);
    --text-base: clamp(0.9rem, 2vmin, 1.125rem);
    --text-lg: clamp(1rem, 2.5vmin, 1.5rem);
    --text-xl: clamp(1.2rem, 3.5vmin, 2.25rem);
    --text-2xl: clamp(1.5rem, 5vmin, 3.5rem);
    --text-hero: clamp(3rem, 10vmin, 8rem);

    --space-2: 0.5rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 3rem;

    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;

    --font-display: 'JetBrains Mono', 'Courier New', monospace;
    --font-body: 'Space Grotesk', 'Helvetica Neue', sans-serif;
}

:root, [data-theme="dark"] {
    --color-bg: #0d0f10;
    --color-surface: #111416;
    --color-border: #2e3840;
    --color-text: #d0dce6;
    --color-text-muted: #6b8090;
    --color-text-faint: #3e5060;
    --color-primary: #00c8d4;
    --color-danger: #ff4757;
    --color-success: #2ed573;
}

[data-theme="light"] {
    --color-bg: #f0f4f8;
    --color-surface: #f8fafb;
    --color-border: #b8c8d6;
    --color-text: #1a2530;
    --color-text-muted: #4a6070;
    --color-text-faint: #8aa0b0;
    --color-primary: #0090a0;
    --color-danger: #ff4757;
    --color-success: #2ed573;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    min-height: 100dvh;
    transition: background-color 0.4s ease, color 0.4s ease;
    position: relative;
}

.hidden { display: none !important; }

.box {
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    transition: border-color 0.4s ease, background 0.4s ease;
}

button {
    background: var(--color-border);
    color: var(--color-text);
    border: none;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    width: 100%;
}
button:hover { background: var(--color-text-faint); }
button.primary { background: var(--color-primary); color: var(--color-bg); }
button.primary:hover { opacity: 0.9; }
button.danger { background: var(--color-danger); color: white; }

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
label { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 500; }
input[type="text"], input[type="password"], input[type="url"], textarea {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-base);
    width: 100%;
}
input:focus, textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.theme-toggle {
    position: fixed; top: var(--space-6); right: var(--space-6); z-index: 100;
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 50%; color: var(--color-text-muted); cursor: pointer; transition: all 0.2s;
}
.theme-toggle:hover { color: var(--color-text); border-color: var(--color-text); }