:root {
    --color-bg:            #0a7197;
    --color-bg-dark:       #053d52;
    --color-surface:       #1a1a1a;
    --color-border:        #2a2a2a;
    --color-border-input:  #333;
    --color-border-focus:  #555;

    --color-text:          #e0e0e0;
    --color-heading:       #fff;
    --color-muted:         #888;
    --color-label:         #aaa;
    --color-subtle:        #555;
    --color-faint:         #444;

    --color-accent:        #b2ef00;
    --color-highlight:     #22d3ee;
    --color-primary:       #fff;
    --color-primary-text:  #0f0f0f;

    --color-error-bg:      #2d1215;
    --color-error-border:  #5c2328;
    --color-error-text:    #f87171;

    --radius-sm:  0;
    --radius-md:  0;
    --radius-lg:  0;

    --font-stack: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-light:  300;
    --font-normal: 400;
    --font-bold:   700;
    --text-xs:    0.8125rem;
    --text-sm:    0.875rem;
    --text-base:  0.9375rem;
    --text-md:    1rem;
    --text-lg:    1.125rem;
    --text-xl:    1.5rem;
    --text-2xl:   2rem;

    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:   12px;
    --space-lg:   20px;
    --space-xl:   32px;
    --space-2xl:  40px;
    --space-3xl:  48px;
    --space-4xl:  60px;

    --transition: 0.2s ease;

    --site-max-width: 1440px;
    --site-padding: max(var(--space-2xl), calc(50% - var(--site-max-width) / 2 + var(--space-2xl)));
}

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

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-stack);
    font-weight: var(--font-light);
    font-size: var(--text-base);
    background: radial-gradient(ellipse at center, var(--color-bg) 0%, var(--color-bg-dark) 100%);
    color: var(--color-text);
    min-height: 100vh;
}

a {
    color: var(--color-label);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--color-heading);
}

.text-center {
    text-align: center;
}

.mark-accent {
    background: var(--color-accent);
    color: #0a0a0a;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.text-bold {
    font-weight: var(--font-bold);
}

.text-uppercase {
    text-transform: uppercase;
}

.text-light {
    font-weight: var(--font-light);
}