/* Levai Energy Systems — base layer
   Reset, type defaults, links, buttons, cards, focus states, forms, motion. */

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--text-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--container); margin:0 auto; padding:0 var(--space-5);}

h1,h2,h3,h4{font-family:var(--display); font-weight:600; letter-spacing:-0.01em;}

/* ---------- focus ---------- */
:focus-visible{
  outline:2px solid var(--blue-accent);
  outline-offset:2px;
  border-radius: var(--radius-sm);
}

/* ---------- links ---------- */
a{ transition:color 160ms var(--ease-out); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--space-2);
  font-family:var(--body);
  font-size:var(--text-body-sm);
  font-weight:600;
  padding:13px 22px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  transition:transform 160ms var(--ease-out), background-color 160ms var(--ease-out),
             border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:scale(0.97); }

.btn-primary{
  background:var(--blue-solid);
  color:var(--on-blue-solid);
  box-shadow:0 8px 24px -8px var(--btn-shadow);
}
.btn-primary:hover{ filter:brightness(1.06); }

.btn-secondary{
  background:transparent;
  color:var(--ink);
  border-color:var(--line-strong);
}
.btn-secondary:hover{ background:var(--icon-wash); border-color:var(--blue-accent); }

.btn-ghost{
  background:transparent;
  color:var(--ink-dim);
  padding-left:4px; padding-right:4px;
}
.btn-ghost:hover{ color:var(--ink); }

/* ---------- cards ---------- */
.card{
  background:var(--card-bg-top);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:0 1px 2px var(--card-shadow-1), 0 10px 28px -16px var(--card-shadow-2);
  transition:transform 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.card:hover{
  border-color:var(--card-hover-border);
  transform:translateY(-6px);
  box-shadow:0 4px 10px var(--card-shadow-1-hover), 0 16px 34px -16px var(--card-shadow-2-hover);
}

/* ---------- forms ---------- */
.form-row{ display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-4); }
.form-row label{
  font-family:var(--mono);
  font-size:var(--text-label);
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--ink-dim);
}
.form-row input, .form-row select, .form-row textarea{
  font-family:var(--body);
  font-size:var(--text-body);
  color:var(--ink);
  background:var(--panel);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  padding:11px 13px;
  transition:border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.form-row input:focus-visible, .form-row select:focus-visible, .form-row textarea:focus-visible{
  outline:none;
  border-color:var(--blue-accent);
  box-shadow:0 0 0 3px var(--icon-wash);
}
.form-row textarea{ min-height:96px; resize:vertical; }
.form-note{ font-size:var(--text-body-sm); color:var(--ink-dim); margin-top:var(--space-3); }
.form-error{ color:var(--status-critical); }

/* ---------- status ---------- */
.status-dot{ width:6px; height:6px; border-radius:50%; display:inline-block; }
.status-dot.live{ background:var(--status-live); animation:status-pulse 2s ease-in-out infinite; }
.status-dot.warn{ background:var(--status-warn); }
.status-dot.critical{ background:var(--status-critical); }
@keyframes status-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }

/* ---------- scroll reveal (data-reveal attribute system) ---------- */
[data-reveal]{ transition:transform 420ms var(--ease-out), opacity 420ms var(--ease-out); }
[data-reveal="fade-up"]{ opacity:0; transform:translateY(18px); }
[data-reveal="fade-left"]{ opacity:0; transform:translateX(-24px); }
[data-reveal="fade-right"]{ opacity:0; transform:translateX(24px); }
[data-reveal="scale-in"]{ opacity:0; transform:scale(0.96); }
[data-reveal].in{ opacity:1; transform:none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}