/* Solar Design System — Global Light DOM Styles */

/* Global resets */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background-color: var(--solar-bg);
  background-image: var(--solar-bg-pattern);
  color: var(--solar-fg);
  line-height: 1.5;
  font-size: var(--solar-font-size-base, 16px);
  transition: background-color var(--solar-transition), color var(--solar-transition);
  overflow-x: hidden;
}

/* Scrollbar — Brutalist style, same for both orientations */
::-webkit-scrollbar { width: 12px; height: 12px; -webkit-appearance: none; }
::-webkit-scrollbar-track { background: var(--solar-bg); }
::-webkit-scrollbar-track:vertical { border-left: var(--solar-border-width) solid var(--solar-border); }
::-webkit-scrollbar-track:horizontal { border-top: var(--solar-border-width) solid var(--solar-border); }
::-webkit-scrollbar-thumb { background-color: var(--solar-fg); border: 2px solid var(--solar-bg); border-radius: var(--solar-border-radius, 0px); -webkit-appearance: none; }
::-webkit-scrollbar-thumb:hover { background-color: var(--solar-primary); }

/* Firefox scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--solar-fg) var(--solar-bg); }

::selection { background-color: var(--solar-accent); color: var(--solar-bg); }

/* Typography */
h1, h2, h3, h4, h5, h6 {
  text-transform: var(--solar-text-transform);
  letter-spacing: -0.02em;
  margin-bottom: 0.5em;
  color: var(--solar-fg);
}

a {
  color: var(--solar-primary);
  text-decoration: none;
  font-weight: bold;
  border-bottom: var(--solar-border-width) solid var(--solar-primary);
  transition: all var(--solar-transition);
}
a:hover { background-color: var(--solar-primary); color: var(--solar-bg); }

/* Cards (light DOM version — mirrors shared-styles.js) */
.solar-card {
  background-color: var(--solar-card-bg, var(--solar-bg));
  backdrop-filter: var(--solar-backdrop, none);
  -webkit-backdrop-filter: var(--solar-backdrop, none);
  border: var(--solar-border-width) solid var(--solar-border);
  border-radius: var(--solar-border-radius);
  padding: var(--solar-spacing-lg, 24px);
  box-shadow: var(--solar-shadow);
  transition: transform var(--solar-transition), box-shadow var(--solar-transition);
  position: relative;
  overflow: hidden;
}
.solar-card.hoverable:hover {
  transform: var(--solar-hover-transform);
  box-shadow: var(--solar-shadow-hover);
}

/* Layout */
.solar-container { max-width: 1200px; margin: 0 auto; padding: var(--solar-spacing-md, 20px); }
/* .solar-grid is now generated by ResponsiveManager */
/* .grid-2, .grid-3, .grid-sidebar are now generated by ResponsiveManager */

/* Header / Navbar */
.solar-header {
  border-bottom: var(--solar-border-width) solid var(--solar-border);
  background-color: var(--solar-bg);
  background-image: var(--solar-bg-pattern);
  padding: var(--solar-spacing-md, 20px) 0;
  margin-bottom: var(--solar-spacing-xl, 40px);
}
.solar-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--solar-spacing-sm, 15px);
}

/* Mode toggle buttons (dark/light/auto switch) */
.mode-toggle-wrapper {
  display: inline-flex;
  gap: 4px;
  border: var(--solar-border-width) solid var(--solar-border);
  border-radius: var(--solar-border-radius);
  padding: 4px;
}
.mode-toggle-btn {
  background: transparent;
  color: var(--solar-fg);
  border: none;
  border-radius: calc(var(--solar-border-radius) / 2);
  padding: 6px 10px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--solar-transition);
  font-family: var(--solar-font-mono), monospace;
}
.mode-toggle-btn:hover { opacity: 0.8; }
.mode-toggle-btn.active {
  background-color: var(--solar-primary);
  color: var(--solar-bg);
}

/* Text helpers */
.font-mono { font-family: var(--solar-font-mono), monospace; }
.text-accent { color: var(--solar-accent); }
.text-primary { color: var(--solar-primary); }
.text-muted { opacity: 0.7; }

/* Form layouts */
.solar-form-group { margin-bottom: var(--solar-spacing-md, 20px); }

/* Badge/tag wrapper */
.tag-container { display: flex; flex-wrap: wrap; gap: var(--solar-spacing-sm, 8px); margin: var(--solar-spacing-sm, 10px) 0; }

/* SSR content — server-rendered for SEO/crawler visibility.
   Visually hidden because the SPA renders the same data interactively.
   Content remains in the DOM and fully readable by search engine bots. */
.ssr-content { display: none; }

/* Animations */
@keyframes pop-in {
  0% { transform: scale(0.95); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.animate-pop { animation: pop-in var(--solar-transition) forwards; }

.hover-lift { transition: transform var(--solar-transition); }
.hover-lift:hover { transform: var(--solar-hover-transform); }