/* custom-theme.css */

:root {
    --sl-color-primary-50: #fef2f0;
    --sl-color-primary-100: #fddcd3;
    --sl-color-primary-200: #fab7a6;
    --sl-color-primary-300: #f48f75;
    --sl-color-primary-400: #ef643d;
    --sl-color-primary-500: #e94e1b;
    --sl-color-primary-600: #d33f13;
    --sl-color-primary-700: #aa320e;
    --sl-color-primary-800: #7c240a;
    --sl-color-primary-900: #4f1505;

    --sl-color-neutral-0: #ffffff;
    --sl-color-neutral-100: #e0e3e7;
    --sl-color-neutral-200: #e0e0e0;
    --sl-color-neutral-300: #c6c6c6;
    --sl-color-neutral-400: #999999;
    --sl-color-neutral-500: #666666;
    --sl-color-neutral-600: #303030;
    --sl-color-neutral-700: #2d2a29;
    --sl-color-neutral-800: #1f1f1f;
    --sl-color-neutral-900: #121212;
    --sl-color-neutral-950: #0a0a0a;

    --sl-font-sans: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --sl-font-mono: 'Source Code Pro', monospace;

    --sl-border-radius-small: 4px;
    --sl-border-radius-medium: 6px;
    --sl-border-radius-large: 10px;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;
    --space-10: 4rem;
    --space-12: 6rem;

    --max-width: 1200px;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;

    --line-height-tight: 1.2;
    --line-height-base: 1.5;
    --line-height-loose: 1.75;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
}

body {
    height: 100%;
    display: flex;
    flex-direction: column;
    font-family: var(--sl-font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--sl-color-neutral-100);
    background-color: var(--sl-color-neutral-700);
    margin: 0;
}

h1,
h2,
h3,
h4 {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin: 0 0 var(--space-2) 0;
}

h1 {
    font-size: var(--font-size-2xl);
}
h2 {
    font-size: var(--font-size-xl);
}
h3 {
    font-size: var(--font-size-lg);
}

.button-row {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
}

.select-page-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}