/**
 * ╔══════════════════════════════════════════════════════════════╗
 * ║  reset.css — CSS Reset Modern                                ║
 * ║  Bazat pe: Modern CSS Reset (Andy Bell) + ajustări proprii   ║
 * ║                                                              ║
 * ║  DE CE AVEM NEVOIE DE RESET?                                 ║
 * ║  Browserele (Chrome, Firefox, Safari) aplică stiluri        ║
 * ║  implicite diferite elementelor HTML. Reset-ul elimină        ║
 * ║  aceste diferențe și oferă o bază uniformă.                  ║
 * ║                                                              ║
 * ║  CE FACE FIECARE SECȚIUNE:                                   ║
 * ║  §1 Box Model   — calculare dimensiuni intuitivă             ║
 * ║  §2 Tipografie  — elimină stiluri implicite text             ║
 * ║  §3 Liste       — elimină bullets/numere implicite           ║
 * ║  §4 Formulare   — uniformizare între browsere                ║
 * ║  §5 Media       — imagini, video responsive implicit         ║
 * ║  §6 Accesibilitate — focus vizibil, motion                   ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

/* §1 BOX MODEL — Include border și padding în width/height */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* §2 ROOT — Scroll smooth, text rendering, font size bază */
html {
  scroll-behavior: smooth;       /* scroll animat la ancore #id */
  font-size: 16px;               /* 1rem = 16px */
  -webkit-text-size-adjust: 100%;/* previne zoom text pe iOS */
  text-size-adjust: 100%;
  hanging-punctuation: first last;/* punctuație mai elegantă */
}

/* §3 BODY — Font, culori, overflow */
body {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: var(--fs-base, 1rem);
  line-height: var(--lh-relaxed, 1.75);
  color: var(--txt-primary);
  background-color: var(--bg-page);
  -webkit-font-smoothing: antialiased;      /* text mai clar pe Mac */
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;            /* previne scroll orizontal accidental */
  min-height: 100dvh;            /* înălțime corectă pe mobile */
}

/* §4 TIPOGRAFIE — Resetează stilurile de titluri */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold, 600);
  line-height: var(--lh-tight, 1.1);
  letter-spacing: var(--ls-tight, -0.02em);
  color: var(--txt-secondary);
}

p {
  max-width: 72ch; /* lățime optimă pentru citire — aprox. 72 caractere */
  overflow-wrap: break-word;
}

/* §5 LINK-URI */
a {
  color: inherit;
  text-decoration: none;
}

/* §6 LISTE — Elimină stiluri implicite */
ul, ol { list-style: none; }

/* §7 FORMULARE — Uniformizare cross-browser */
button, input, select, textarea, optgroup {
  font: inherit;        /* moștenește fontul — browserele nu fac asta implicit! */
  color: inherit;
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
  margin: 0;
}

button {
  cursor: pointer;
  -webkit-appearance: none;
}

textarea {
  resize: vertical; /* permite doar redimensionare verticală */
}

/* §8 MEDIA — Imagini și video responsive */
img, svg, video, canvas, picture {
  display: block;
  max-width: 100%;
}

img, video {
  height: auto;       /* păstrează aspect ratio automat */
}

/* SVG moștenesc culoarea textului parent */
svg {
  fill: currentColor;
}

/* §9 TABELE */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* §10 ACCESIBILITATE — Focus vizibil */
/* Stilul implicit focus este eliminat și înlocuit cu unul mai frumos */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2.5px solid var(--brand, #C8873A);
  outline-offset: 3px;
  border-radius: var(--r-sm, 4px);
}

/* §11 SELECȚIE TEXT */
::selection {
  background-color: var(--clr-caramel-200, #FAE0A8);
  color: var(--clr-choco-900, #2E1A0E);
}

/* §12 SCROLLBAR CUSTOMIZAT */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: var(--clr-vanilla-200);
}
::-webkit-scrollbar-thumb {
  background: var(--clr-caramel-300);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--clr-caramel-500);
}

/* §13 REDUCED MOTION — Respectă preferința utilizatorului */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto; /* elimină scroll animat */
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}