/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root,
:root[data-theme="light"] {
	--bg: #f7f9fa;
	--card-bg: #fff;
	--text: #222;
	--muted: #888;
	--muted-strong: #444;
	--border: #eee;
	--accent: #2a7;
	--accent-contrast: #fff;
}

:root[data-theme="dark"] {
	--bg: #14161a;
	--card-bg: #1f232a;
	--text: #eee;
	--muted: #9aa0a6;
	--muted-strong: #c7ccd1;
	--border: #2c313a;
	--accent: #3ddc84;
	--accent-contrast: #0b1f14;
}

:root[data-theme="ocean"] {
	--bg: #eaf4fb;
	--card-bg: #fff;
	--text: #0b2e44;
	--muted: #5c7d90;
	--muted-strong: #274456;
	--border: #d3e8f2;
	--accent: #2a7fd4;
	--accent-contrast: #fff;
}

:root[data-theme="sunset"] {
	--bg: #fff3ea;
	--card-bg: #fff;
	--text: #4a2b12;
	--muted: #a97a52;
	--muted-strong: #7a4a22;
	--border: #f3ddc9;
	--accent: #ff7a3d;
	--accent-contrast: #fff;
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: 'Segoe UI', Arial, sans-serif;
	margin: 0;
	padding: 0;
}

.btn {
	transition: background 0.2s, color 0.2s;
	cursor: pointer;
}
.btn:hover {
	filter: brightness(0.95);
	opacity: 0.92;
}

/* A hover / keyboard-focus dropdown in the top navigation ("Design tools"). */
.nav-menu {
  position: relative;
}
.nav-menu-label {
  text-decoration: none;
  color: var(--muted-strong);
}
.nav-menu-items {
  display: none;
  position: absolute;
  top: 100%;
  left: -12px;
  z-index: 3000;
  min-width: 260px;
  padding: 8px 0;
  margin-top: 8px;
  background: var(--card-bg);
  border-radius: 10px;
  box-shadow: 0 4px 16px #0002;
}
/* bridges the gap between the label and the menu, so the hover doesn't drop on the way down */
.nav-menu-items::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.nav-menu:hover .nav-menu-items,
.nav-menu:focus-within .nav-menu-items {
  display: block;
}
.nav-menu-items a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}
.nav-menu-items a:hover,
.nav-menu-items a:focus {
  background: var(--bg);
}