* {
    box-sizing: border-box;
}

:root {
    --color-bg: #F7F8FC;
    --color-surface: #FFFFFF;
    --color-surface-muted: #F1F5FA;
    --color-surface-elevated: #FFFFFF;
    --color-border: #DCE2EE;

    --color-text-primary: #13233F;
    --color-text-primary-rgb: 19 35 63;
    --color-text-secondary: #66728A;

    --color-primary: #14274C;
    --color-primary-rgb: 20 39 76;
    --color-primary-hover: #1C3565;
    --color-primary-text: #FFFFFF;
    --color-primary-text-rgb: 255 255 255;

    --color-accent-blue: #4F7CFF;
    --color-accent-teal: #4DD0B3;

    --color-success: #25B46B;
    --color-warning: #F7C948;
    --color-error: #F35B68;

    --color-board-cell: #FFFFFF;
    --color-board-cell-border: #DCE2EE;
    --color-board-cloud: #EAF0FF;
    --color-board-empty: #EEF2F7;
    --color-board-empty-icon: #66728A;
    --color-clue-unsatisfied: #14274C;
    --color-clue-satisfied: #25B46B;
    --color-clue-invalid: #9F1239;
    --color-clue-text: #FFFFFF;

    --color-state-success-bg: #EAF8F0;
    --color-state-success-border: #BCEACD;
    --color-state-success-text: #166534;
    --color-state-warning-bg: #FFF8DB;
    --color-state-warning-border: #F7D969;
    --color-state-warning-text: #8A6100;
    --color-state-error-bg: #FFF0F2;
    --color-state-error-border: #FFB8C1;
    --color-state-error-text: #9F1239;

    --rectangle-orange: #FF9F43;
    --rectangle-yellow: #F7C948;
    --rectangle-mint: #34D399;
    --rectangle-sky: #5AC8FA;
    --rectangle-blue: #4F7CFF;
    --rectangle-violet: #8B7CFF;
    --rectangle-lavender: #C084FC;
    --rectangle-pink: #FF7AA2;
}

body {
    margin: 0;
    font-family: system-ui, sans-serif;
    background: var(--color-bg);
    color: var(--color-text-primary);
    overflow-x: hidden;
}

h1 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 40px;
    line-height: 1.05;
}

p {
    margin: 8px 0 0;
    color: var(--color-text-secondary);
}

button {
    border: 0;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 700;
    cursor: pointer;
    background: var(--color-primary);
    color: var(--color-primary-text);
}

button:hover {
    background: var(--color-primary-hover);
}

button:focus-visible,
select:focus-visible,
.cell:focus-visible {
    outline: 3px solid var(--color-accent-blue);
    outline-offset: 2px;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

button:disabled:hover {
    background: var(--color-primary);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

select {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 9px 12px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font: inherit;
    font-weight: 700;
}