@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/fredoka-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/fredoka-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/dm-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/dm-sans-latin-700-normal.woff2') format('woff2'); }
/* Homesket shared look: the login page style on every page. Load this LAST, after theme.css and the page's own styles. */
:root, [data-theme="dark"] {
  --bg-page: transparent; --terra: #C8784A; --terra-dark: #A85F35; --terra-pale: rgba(200,120,74,0.12);
  --brown: #3D2010; --brown-mid: #7A5233; --muted: #8A6445; --cream: #FBF7F2; --sand: #F0E8DC;
  --border: rgba(61,32,16,0.12); --card-bg: #FBF7F2; --card-shadow: 0 5px 0 rgba(61,32,16,0.3);
  --card-shadow-hover: 0 7px 0 rgba(61,32,16,0.3); --card-radius: 22px; --nav-bg: #FBF7F2; --nav-border: transparent;
  --input-bg: #fff; --input-border: rgba(61,32,16,0.18); --input-text: #3D2010;
  --add-bg: #A85F35; --add-hover: #8E4E29; --add-text: #FBF7F2; --modal-bg: #FBF7F2; --modal-overlay: rgba(61,32,16,0.55);
  --text-primary: #3D2010; --text-secondary: #7A5233; --text-muted: #8A6445;
  --toggle-bg: #FBF7F2; --toggle-border: transparent; --toggle-icon: #3D2010;
  --logo-home: #FBF7F2; --logo-sket: #3D2010; --logo-tagline: #FBF7F2; --terracotta: #A85F35;
}
html { min-height: 100%; }
html body {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 500;
  color: #FBF7F2; background: linear-gradient(180deg, #E08E63 0%, #C8784A 42%, #A85F35 100%) fixed !important;
}
html[data-theme="dark"] body { background: linear-gradient(180deg, #4B3552 0%, #8A5144 48%, #A85F35 100%) fixed !important; }
h1, h2, h3, .logo-wordmark, .nav-wordmark, .footer-logo, .resume-build-name, .build-label, .page-title {
  font-family: 'Fredoka', ui-rounded, system-ui, sans-serif !important; font-weight: 700;
}
.nav-wordmark .home { color: #3D2010 !important; }
.nav-wordmark span { color: #C8784A !important; }
/* Text that sits directly on the gradient */
html:root .hero h1, html:root .hero p, html:root .hero-sub, html:root .hero-eyebrow, html:root .build-label,
html:root .build-sub, html:root .page-title, html:root .page-sub, html:root .page-tag, html:root .resume-divider { color: #FBF7F2 !important; }
html:root .hero h1 em { color: #3D2010 !important; font-size: inherit; }
html:root .hero-illustrations { display: none !important; }
html:root .feat, html:root .pill { background: rgba(61,32,16,0.32) !important; color: #FBF7F2 !important; border: 0 !important; font-weight: 700; }
.feat-dot { background: #FBF7F2 !important; }
/* Cards, panels, modals */
.room-card, .cat-card, .products-panel, .compare-section, .resume-card, .add-room-input-card, .modal, .resume-dropdown {
  background: #FBF7F2 !important; color: #3D2010; border: 0 !important; border-radius: 22px !important; box-shadow: 0 5px 0 rgba(61,32,16,0.3) !important;
}
.room-card:hover, .cat-card:hover { box-shadow: 0 7px 0 rgba(61,32,16,0.3) !important; }
.nav, .builds-tab-bar { background: #FBF7F2 !important; border-color: transparent !important; box-shadow: 0 4px 0 rgba(61,32,16,0.3); }
.build-row, input, select, textarea { border-radius: 14px; }
.build-row { background: #FBF7F2 !important; border: 0 !important; box-shadow: 0 5px 0 rgba(61,32,16,0.3); border-radius: 22px; }
/* Pill buttons with the chunky shadow */
.add-category-btn, .add-product-btn, .btn-confirm, .modal-btn-primary, .continue-btn, .build-btn, .form-btn, .search-btn {
  border-radius: 999px !important; font-weight: 700 !important; box-shadow: 0 4px 0 rgba(61,32,16,0.3) !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.add-category-btn:hover, .add-product-btn:hover, .btn-confirm:hover, .modal-btn-primary:hover, .continue-btn:hover, .build-btn:hover, .form-btn:hover, .search-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(61,32,16,0.3) !important; }
.add-category-btn:active, .add-product-btn:active, .btn-confirm:active, .modal-btn-primary:active, .continue-btn:active, .build-btn:active, .form-btn:active, .search-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(61,32,16,0.3) !important; }
.footer { background: rgba(61,32,16,0.28) !important; border: 0 !important; }
.footer-logo, .footer-link { color: #FBF7F2 !important; opacity: 0.9; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #3D2010; outline-offset: 3px; }
/* Floating icons (same as login) */
.decor {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.layer { position: absolute; inset: 0; transition: transform 0.5s ease-out; }
.layer-far  { transform: translate(calc(var(--mx, 0) * -12px), calc(var(--my, 0) * -12px)); }
.layer-near { transform: translate(calc(var(--mx, 0) * -26px), calc(var(--my, 0) * -26px)); }
.ico {
  position: absolute;
  fill: none;
  stroke: var(--cream);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.17;
  animation: drift var(--dur, 9s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-12px) rotate(calc(var(--r, 0deg) + 3deg)); }
}
@media (max-width: 700px) { .ico { opacity: 0.12; } .ico:nth-child(even) { display: none; } }
@media (prefers-reduced-motion: reduce) { .ico { animation: none !important; } .layer { transform: none !important; transition: none !important; } }
/* Let the gradient show through full-width sections that paint their own sand/black background */
html:root .hero, html[data-theme="dark"] .hero, html:root .section, html:root .section-sand { background: transparent !important; }
html:root .bg-layer, html:root .hero-illustrations { display: none !important; }

.logo-icon { filter: drop-shadow(0 4px 0 rgba(61,32,16,0.3)); }
html[data-theme="dark"] { --logo-sket: #F2B896; }
html[data-theme="dark"]:root .hero h1 em { color: #F2B896 !important; }

.logo-icon { animation: logo-bob 3.2s ease-in-out infinite; }
@keyframes logo-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .logo-icon { animation: none; } }

/* Rooms pages: keep accents on the Homesket palette and make dashed "add" cards readable on the gradient */
:root, [data-theme="dark"] { --slate: #A85F35; --slate-pale: rgba(168, 95, 53, 0.12); --navy: #A85F35; --navy-pale: rgba(168, 95, 53, 0.12); }
html:root .add-room-card, html:root .cat-card-add { background: rgba(251, 247, 242, 0.16) !important; border: 2px dashed rgba(251, 247, 242, 0.8) !important; box-shadow: none !important; }
html:root .add-room-card:hover, html:root .cat-card-add:hover { background: rgba(251, 247, 242, 0.28) !important; }
html:root .add-room-label, html:root .add-room-sub, html:root .cat-card-add, html:root .cat-card-add * { color: #FBF7F2 !important; }
html:root .add-room-icon, html:root .cat-card-add [class*="icon"] { background: rgba(251, 247, 242, 0.25) !important; }
html:root .add-room-icon svg, html:root .cat-card-add svg { stroke: #FBF7F2 !important; }
html:root .room-count-note { color: #FBF7F2 !important; font-weight: 700; }