@import url("editor-buttons.css");
/* ==========================================================================
   base.css — RESET, FONTURI, TIPOGRAFIE, ACCESIBILITATE, UTILITARE
   --------------------------------------------------------------------------
   Depinde de: tokens.css
   Conține:    1. @font-face  2. reset  3. tipografie  4. linkuri & focus
               5. utilitare (.container, .prose, .visually-hidden ...)
   ========================================================================== */

/* 1. FONTURI (servite local — vezi tokens.css §4).
   Fișierele .woff2 se depun în /assets/fonts/. Dacă lipsesc, cad pe fallback
   fără să rupă layout-ul. font-display: swap evită textul invizibil. */




/* 2. RESET minimal, modern */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 106.25%;                   /* 17px la 16px implicit */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4)); /* ancore sub header sticky */
}
@media (max-width: 40em) { html { font-size: 100%; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-0);
  line-height: var(--lh-text);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex;                        /* footer lipit jos pe pagini scurte */
  flex-direction: column;
}
main { flex: 1 0 auto; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }
:target { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }

/* 3. TIPOGRAFIE */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-4); font-weight: 700; }
h2 { font-size: var(--fs-3); font-weight: 600; }
h3 { font-size: var(--fs-2); font-weight: 600; }
h4 { font-size: var(--fs-1); font-weight: 600; }
p, ul, ol, dl, blockquote, figure, pre { margin: 0 0 var(--sp-4); }
.lead { font-size: var(--fs-1); color: var(--fg-muted); max-width: var(--measure); }
small, .small { font-size: var(--fs--1); }
strong { font-weight: 700; }
code, kbd { font-family: var(--font-mono); font-size: 0.9em; background: var(--ale-azur-100); padding: 0.1em 0.35em; border-radius: var(--r-sm); }
blockquote { border-left: 4px solid var(--ale-aur); padding-left: var(--sp-4); color: var(--fg-muted); font-style: italic; }

/* 4. LINKURI ȘI FOCUS
   Regulă: focusul este ÎNTOTDEAUNA vizibil, cu inel galben web-safe (#ffcc00)
   + contur navy, astfel încât să fie vizibil și pe alb, și pe navy. */
a { color: var(--link); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
.on-dark a, .on-dark { color: var(--fg-on-dark); }
.on-dark a { color: var(--link-on-dark); }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--ale-navy);
  border-radius: var(--r-sm);
}
::selection { background: var(--ale-aur-300); color: var(--ws-black); }

/* 5. UTILITARE */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); margin-inline: auto; }

/* .prose — text lung (articole, documente juridice, politici). Ține rândul
   sub 80 de caractere și dă ritm vertical listelor numerotate juridic. */
.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--sp-7); }
.prose h3 { margin-top: var(--sp-6); }
.prose ol { padding-left: 1.5em; }
.prose ol ol { list-style: lower-alpha; }
.prose li + li { margin-top: var(--sp-2); }
.prose table { font-size: var(--fs--1); margin-bottom: var(--sp-5); }
.prose th, .prose td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: top; }
.prose th { background: var(--ale-azur-100); font-weight: 600; }

/* Ascuns vizual, disponibil cititoarelor de ecran */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* Link „Sari la conținut” — primul element focusabil din pagină */
.skip-link {
  position: absolute; top: -100%; left: var(--sp-4); z-index: var(--z-skip);
  background: var(--ws-yellow); color: var(--ws-black); padding: var(--sp-2) var(--sp-4);
  border-radius: 0 0 var(--r-md) var(--r-md); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 0; }

.text-muted { color: var(--fg-muted); }
.text-center { text-align: center; }
.stack > * + * { margin-top: var(--sp-4); }   /* ritm vertical uniform */
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.mt-6 { margin-top: var(--sp-6); } .mt-7 { margin-top: var(--sp-7); }