/* css/base.css — reset, design tokens, typography, buttons, inputs */

:root {
    /* Palette — audited in Task 26, values unchanged for now */
    --c-bg: #f4f1ea;
    --c-surface: #fffdf7;
    --c-canvas: #f6f2ea;
    --c-ink: #3a3226;
    --c-ink-muted: #6b6045;
    --c-ink-faint: #8a7f66;
    --c-accent: #7a4a3a;
    --c-accent-hover: #653d30;
    --c-border: #cbbf9e;
    --c-border-soft: #e2dbc9;
    --c-border-faint: #ece5d3;
    --c-danger: #b32323;
    --c-danger-border: #e0b5b0;
    --c-danger-bg: #fbeceb;
    --c-select: #2f6fd1;
    --c-select-bg: #eaf1fc;

    /* Touch targets — the 44px floor is a global constraint */
    --tap-min: 44px;
    --tap-icon: 44px;

    /* Spacing scale */
    --sp-1: 4px;
    --sp-2: 6px;
    --sp-3: 8px;
    --sp-4: 12px;
    --sp-5: 18px;

    /* Radii */
    --radius: 6px;
    --radius-lg: 8px;

    /* Focus ring — used from Task 26 onward */
    --focus-ring: 0 0 0 3px rgba(47, 111, 209, 0.45);

    /* Z-index layers. Previously ad-hoc: 40 zoom controls, 50 seat popup. */
    --z-canvas-ui: 40;
    --z-popup: 50;
    --z-sheet: 60;
    --z-tabbar: 70;
    --z-modal: 80;
    --z-toast: 90;
}

/* Global styles for the wedding seating planner */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

html, body {
    height: 100%;
    overscroll-behavior: none;   /* no pull-to-refresh mid-drag */
}

body {
    background-color: #f4f1ea;
    color: #3a3226;
}

/* --- Buttons --- */

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

button {
    padding: 7px 12px;
    font-size: 0.85rem;
    border: 1px solid #cbbf9e;
    border-radius: 6px;
    background: #fff;
    color: #3a3226;
    cursor: pointer;
    transition: background-color 0.15s, transform 0.05s;
}

button:hover {
    background: #f1ead9;
}

button:active {
    transform: scale(0.97);
}

button.primary {
    background: #7a4a3a;
    border-color: #7a4a3a;
    color: #fff;
}

button.primary:hover {
    background: #653d30;
}

button.danger {
    color: #b32323;
    border-color: #e0b5b0;
}

button.danger:hover {
    background: #fbeceb;
}

button.icon-btn {
    padding: 4px 8px;
    font-size: 0.85rem;
    line-height: 1;
}

/* --- Inputs --- */

input[type="text"],
input[type="number"] {
    padding: 6px 8px;
    border: 1px solid #cbbf9e;
    border-radius: 6px;
    font-size: 0.85rem;
    background: #fff;
    width: 100%;
}

#add-guest-form {
    margin-bottom: 10px;
}

#add-guest-form input {
    flex: 1;
}

.field-label {
    display: block;
    font-size: 0.78rem;
    color: #6b6045;
    margin-bottom: 8px;
}

.field-label input {
    margin-top: 3px;
}

/* --- Utility --- */

.hidden {
    display: none !important;
}