/* ============================================================================
   Masahati - blush / dusty-rose / cream theme layer
   Loaded AFTER style.css. It only RE-COLORS the existing selectors (no layout
   or spacing rules), so it can never break responsive behavior, and style.css
   itself does not need to change.

   Contrast notes (WCAG): body text #4A2C33 on #FFFBF9 ~ 12:1; primary button
   white on #A85A67 ~ 4.9:1; nav text #4A2C33 on #E3B5AE ~ 6.7:1.
   ============================================================================ */

:root {
    --primary-color: #7A4A55;      /* dark warm mauve - headings, accents */
    --secondary-color: #A85A67;    /* rose - primary actions, focus */
    --accent-color: #D9A6A0;       /* dusty rose */
    --success-color: #4F7A5E;      /* sage */
    --warning-color: #A4691F;
    --error-color: #B5454F;        /* muted raspberry */
    --light-bg: #FBF1EE;           /* very pale blush page background */
    --text-dark: #4A2C33;
    --text-light: #8C6E73;
    --border-radius: 8px;
    --box-shadow: 0 2px 10px rgba(122, 74, 85, 0.12);
}

body {
    background-color: #FBF1EE;
    color: #4A2C33;
}

/* ---- Navigation ---- */
.navbar {
    background-color: #E3B5AE;
    color: #4A2C33;
    box-shadow: 0 2px 10px rgba(122, 74, 85, 0.15);
}
.navbar-brand .logo { color: #5B2E3B; }
.navbar-brand .logo:hover { color: #8A3F52; }
.nav-link { color: #4A2C33; }
.nav-link:hover { color: #8A3F52; }

/* ---- Panels ---- */
.planner-container { background-color: #FBF1EE; }
.control-panel,
.canvas-area,
.modal-content { background-color: #FFFBF9; }
.left-panel { border-right: 1px solid #F0D9D5; }
.right-panel { border-left: 1px solid #F0D9D5; }
.panel-section { border-bottom: 1px solid #F3E3E0; }
.canvas-header { border-bottom: 1px solid #F0D9D5; }
.panel-section h3,
.modal-content h3,
.canvas-header h2 { color: #7A4A55; }

/* ---- Buttons ---- */
.btn-primary { background-color: #A85A67; color: #ffffff; }
.btn-primary:hover {
    background-color: #944D5A;
    box-shadow: 0 4px 8px rgba(148, 77, 90, 0.25);
}
.btn-secondary {
    background-color: #FBEDEA;
    color: #6B3E48;
    border: 1px solid #E8C7C2;
}
.btn-secondary:hover { background-color: #F6DAD4; }
.btn-danger { background-color: #B5454F; color: #ffffff; }
.btn-danger:hover { background-color: #9C3842; }

/* ---- Furniture categories / list ---- */
.category-btn {
    background-color: #FBEDEA;
    color: #6B3E48;
    border: 1px solid #E8C7C2;
}
.category-btn:hover { background-color: #F6DAD4; }
select { background-color: #FFFBF9; color: #4A2C33; }
.category-btn.active {
    background-color: #A85A67;
    border-color: #944D5A;
    color: #ffffff;
}
.furniture-btn:hover { box-shadow: 0 4px 8px rgba(148, 77, 90, 0.18); }
#addedItemsList { border: 1px solid #F0D9D5; background-color: #FFFBF9; }
#addedItemsList > div:hover { background-color: #F6DAD4 !important; }

/* ---- Forms / focus ---- */
.form-group input,
.form-group select,
.form-group textarea,
#importJson { border: 1px solid #E8CFCB; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #C0727D;
    box-shadow: 0 0 0 2px rgba(192, 114, 125, 0.2);
}
button:focus, input:focus, select:focus, textarea:focus, .btn:focus {
    outline: 2px solid #A85A67;
}

/* ---- Info / lists / modals / toasts ---- */
.info-box { background-color: #FBF3F0; border: 1px solid #F0D9D5; }
.properties-empty { color: #8C6E73; }
.modal { background-color: rgba(74, 44, 51, 0.45); }
#designsList { border: 1px solid #F0D9D5; }
.design-item { border-bottom: 1px solid #F6E8E5; }
.toast { background-color: #4A2C33; }
.ad-container, .ad-placeholder { background-color: #FBF3F0; border-color: #EBD3CE; }