/* ================================
   RETRO‑OS UI KIT — GLOBAL TOKENS
   ================================ */

:root {
    --gray: #A0A0A0;
    --white: #F0F0F0;
    --blue: #0078D7;
    --red: #EB1123;

    --border-radius: 4px;
    --border: 1px solid var(--blue);
    --font-bitmap: "Courier New", monospace;
    --font-modern: "Segoe UI", sans-serif;
}

/* ================================
   BASE PAGE
   ================================ */

body {
    background: var(--white);
    color: #000;
    font-family: var(--font-modern);
    margin: 0;
    padding: 20px;
}

/* ================================
   TYPOGRAPHY
   ================================ */

h1 {
    font-family: var(--font-bitmap);
    font-size: 24px;
    text-transform: uppercase;
}

h2, h3 {
    font-family: var(--font-modern);
    font-weight: 600;
}

p, label, input, button {
    font-family: var(--font-modern);
    font-size: 14px;
}

/* ================================
   WINDOW HEADER
   ================================ */

.window-header {
    background: var(--gray);
    border: var(--border);
    padding: 6px 10px;
    font-family: var(--font-bitmap);
    text-transform: uppercase;
}

/* ================================
   BUTTONS
   ================================ */

.btn {
    background: var(--gray);
    border: var(--border);
    padding: 6px 14px;
    cursor: pointer;
    font-family: var(--font-modern);
    transition: background 0.15s;
}

.btn:hover {
    background: var(--blue);
    color: var(--white);
}

.btn:disabled {
    background: #ccc;
    border: 1px solid #999;
    color: #666;
    cursor: not-allowed;
}

/* ================================
   TABS
   ================================ */

.tabs {
    display: flex;
    gap: 4px;
}

.tab {
    padding: 6px 12px;
    border: var(--border);
    background: var(--gray);
    cursor: pointer;
}

.tab.active {
    background: var(--blue);
    color: var(--white);
}

/* ================================
   INPUT FIELD
   ================================ */

input[type="text"] {
    border: var(--border);
    padding: 6px;
    background: var(--white);
    font-family: var(--font-modern);
}

/* ================================
   CHECKBOX
   ================================ */

.checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
}

.checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--blue);
}

/* ================================
   TOAST / NOTIFICATION
   ================================ */

.toast {
    background: var(--gray);
    border: var(--border);
    padding: 10px;
    width: fit-content;
    font-family: var(--font-modern);
}

/* ================================
   MODAL
   ================================ */

.modal {
    background: var(--white);
    border: var(--border);
    padding: 20px;
    width: 300px;
    border-radius: var(--border-radius);
}

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* ================================
   RULES (from styleguide)
   ================================ */
/* 
   • Use 1 accent color → var(--blue)
   • Avoid heavy shadows → none used
   • Keep borders 1px → enforced globally
*/