/* ============================================================================
   Solva — BASE. Reset + primitivele comune, construite PE tokens.css.
   Se importă imediat DUPĂ tokens.css, pe orice pagină.

   Aici stă tot ce era rescris de la zero în fiecare fișier: butoane, câmpuri,
   carduri, tabele, badge-uri, mesaje de stare. Erau cinci implementări ușor
   diferite ale aceluiași buton — de-aia nimic nu se potrivea cu nimic.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-sans);
  font-size:var(--text-md);
  line-height:var(--leading-normal);
  letter-spacing:var(--tracking-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg,video{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:none}
strong,b{color:var(--fg);font-weight:var(--weight-semibold)}
::selection{background:var(--ring);color:var(--fg)}
hr{border:0;border-top:1px solid var(--border);margin:var(--space-7) 0}

/* Titlurile primesc ritmul din scară, nu mărimi alese pe element. */
h1,h2,h3,h4,h5,h6{
  margin:0;
  font-weight:var(--weight-bold);
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-heading);
  text-wrap:balance;
}
h1{font-size:var(--display-md)}
h2{font-size:var(--display-sm)}
h3{font-size:var(--text-xl)}
h4{font-size:var(--text-lg);font-weight:var(--weight-semibold)}
p{margin:0}

/* Inelul de focus — lipsea de pe majoritatea controalelor. Nu e doar
   accesibilitate: un focus vizibil și consistent e una dintre diferențele cele
   mai vizibile între o interfață îngrijită și una improvizată. */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-xs);
}
:focus:not(:focus-visible){outline:none}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.wrap{max-width:var(--page);margin:0 auto;padding:0 var(--gutter)}
.content{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter)}
.stack{display:flex;flex-direction:column}
.stack-2{gap:var(--space-2)} .stack-3{gap:var(--space-3)}
.stack-4{gap:var(--space-4)} .stack-6{gap:var(--space-6)}

/* ── Tipografie utilitară ───────────────────────────────────────────────── */
.eyebrow{
  display:inline-block;
  font-size:var(--text-sm);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 var(--space-3);
}
.muted{color:var(--muted)}
.small{font-size:var(--text-base)}

/* ── Butoane ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--space-2);
  padding:var(--space-3) var(--space-6);
  min-height:44px;                       /* țintă de atingere, era 36–52 aiurea */
  border:1px solid transparent;
  border-radius:var(--r-full);
  font-family:inherit;
  font-size:var(--text-base);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-body);
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:transform var(--dur-fast) var(--ease),
             box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             opacity var(--dur-fast) var(--ease);
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:default;transform:none}
.btn svg{width:18px;height:18px;flex:none}

.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 8px 24px var(--glow-1)}
.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 34px var(--glow-1)}

.btn-ghost{background:color-mix(in srgb,var(--fg) 6%,transparent);color:var(--fg);border-color:var(--border-strong)}
.btn-ghost:hover:not(:disabled){border-color:var(--fg-soft);background:color-mix(in srgb,var(--fg) 10%,transparent)}

.btn-quiet{background:transparent;color:var(--accent);border-color:var(--border)}
.btn-quiet:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 10%,transparent)}

.btn-danger{background:transparent;color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.btn-danger:hover:not(:disabled){background:var(--danger-soft)}

.btn-lg{padding:var(--space-4) var(--space-7);font-size:var(--text-md);min-height:52px}
.btn-sm{padding:var(--space-2) var(--space-4);font-size:var(--text-sm);min-height:34px}

/* Gradientul de brand — era copiat ca literal în patru fișiere. */
.btn-brand{
  background:linear-gradient(135deg,var(--accent),var(--accent-3));
  color:var(--on-accent);border-color:transparent;
}
.btn-brand:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 34px var(--glow-1)}

/* ── Câmpuri ────────────────────────────────────────────────────────────── */
.field{display:block;margin-bottom:var(--space-5)}
.field > label,label.field-label{
  display:block;
  margin:0 0 var(--space-2);
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
  color:var(--muted);
}
input:not([type="checkbox"]):not([type="radio"]),
textarea,select{
  width:100%;
  padding:var(--space-3);
  min-height:44px;
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  color:var(--fg);
  font-family:inherit;
  font-size:var(--text-base);
  line-height:1.45;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--ring);
}
textarea{min-height:110px;resize:vertical}
.help-text{display:block;margin-top:var(--space-2);font-size:var(--text-xs);color:var(--muted-2)}

/* ── Suprafețe ──────────────────────────────────────────────────────────── */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--space-6);
  box-shadow:var(--shadow-sm);
}

/* ── Mesaje de stare ────────────────────────────────────────────────────── */
.status-msg{
  margin-top:var(--space-4);
  padding:var(--space-3) var(--space-4);
  border-radius:var(--r-sm);
  font-size:var(--text-base);
  border:1px solid transparent;
}
.status-msg:empty{display:none;margin:0;padding:0;border:0}
.status-msg.error{color:var(--danger);background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 30%,transparent)}
.status-msg.ok{color:var(--success);background:var(--success-soft);border-color:color-mix(in srgb,var(--success) 30%,transparent)}

.badge{
  display:inline-flex;align-items:center;gap:var(--space-1);
  padding:var(--space-1) var(--space-3);
  border-radius:var(--r-full);
  font-size:var(--text-xs);
  font-weight:var(--weight-semibold);
  background:color-mix(in srgb,var(--fg) 8%,transparent);
  color:var(--fg-soft);
}
.badge.ok{background:var(--success-soft);color:var(--success)}
.badge.warn{background:var(--warning-soft);color:var(--warning)}
.badge.bad{background:var(--danger-soft);color:var(--danger)}

/* ── Tabele ─────────────────────────────────────────────────────────────── */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
th,td{text-align:left;padding:var(--space-3) var(--space-2);border-bottom:1px solid var(--border);vertical-align:middle}
th{
  color:var(--muted);
  font-weight:var(--weight-semibold);
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:var(--tracking-caps);
}
tbody tr:last-child td{border-bottom:0}

/* ── Comutator de limbă ─────────────────────────────────────────────────── */
.toggle{display:inline-flex;background:var(--card);border:1px solid var(--border);border-radius:var(--r-full);padding:var(--space-1)}
.toggle button{
  border:0;background:transparent;color:var(--muted);
  padding:var(--space-2) var(--space-5);
  border-radius:var(--r-full);
  font-family:inherit;font-size:var(--text-sm);font-weight:var(--weight-semibold);
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.toggle button:hover{color:var(--fg)}
.toggle button.active{background:var(--accent);color:var(--on-accent)}

/* ── Marcă ──────────────────────────────────────────────────────────────── */
.brand{display:flex;align-items:center;gap:var(--space-3);font-weight:var(--weight-semibold);font-size:var(--text-lg);letter-spacing:var(--tracking-heading);color:var(--fg)}
.brand .mark{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 4px 10px var(--glow-1))}

/* ── Mișcare redusă ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}
