/*
 * Stiluri de element. Nimic cu clasă aici.
 */
/*
 * Layerul e declarat AICI, în interiorul fișierului, nu prin `@import … layer()`
 * în main.css. Motivul e practic: minificatorul de CSS din LiteSpeed Cache
 * rescrie @import-urile și pierde funcția layer(), ceea ce ar anula complet
 * ordinea de cascadă în producție. Un bloc @layer e un at-rule obișnuit și
 * supraviețuiește oricărei minificări sau combinări.
 */
@layer base {
  body {
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
  }

  h1 {
    font-size: var(--step-4);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
  }

  h2 {
    font-size: var(--step-3);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
  }

  h3 {
    font-size: var(--step-2);
    line-height: var(--leading-tight);
  }

  h4 {
    font-size: var(--step-1);
    line-height: var(--leading-tight);
  }

  small {
    font-size: var(--step--1);
  }

  /* Un singur stil de focus, vizibil, pe tot site-ul. Tema veche nu are niciunul. */
  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  ::selection {
    background-color: var(--brand-100);
    color: var(--neutral-900);
  }
}