/* On Oblic – baza comună tuturor paginilor: culori, fonturi, spațieri și regulile de bază.
   Puncte de rupere, aceleași în tot CSS-ul (mobile-first, deci min-width):
     sm ≥ 561px · md ≥ 901px · lg ≥ 1025px · xl ≥ 1361px */

:root {
  /* Brand – extras din logo On Oblic */
  --orange: #e67817;
  --orange-hover: #f08a2e;  /* hover pe butoanele portocalii (text bleumarin: 7.2:1) */
  --orange-ink: #ad5a0a;    /* portocaliu pentru text mic, pictograme și focus pe fundal deschis (contrast ≥ 4.5:1) */
  --navy: #1b1464;
  --navy-deep: #110c45;
  --navy-raised: #18134f;   /* carduri pe fundal închis */

  /* aceleași culori ca canale RGB, pentru transparențe: rgb(var(--orange-rgb) / .2) */
  --orange-rgb: 230 120 23;
  --navy-rgb: 27 20 100;
  --navy-deep-rgb: 17 12 69;
  --navy-glow-rgb: 91 82 200;   /* nuanță deschisă a bleumarinului: doar strălucirea din fundalurile închise */

  --tint: #ecebf8;          /* banda deschisă */
  --tint-strong: #dedcf2;
  --text: #3a3f5c;
  --muted: #5f6382;         /* text secundar: 5.8:1 pe alb, 4.9:1 pe banda lila */
  --placeholder: #696d8c;
  --success: #1e7a46;
  --danger: #b8322a;
  --danger-rgb: 184 50 42;
  --focus: var(--orange-ink);
  --line: rgb(var(--navy-rgb) / .10);
  --line-light: rgb(255 255 255 / .14);

  /* text pe fundal închis: trei trepte */
  --on-dark-strong: rgb(255 255 255 / .82);
  --on-dark: rgb(255 255 255 / .72);
  --on-dark-muted: rgb(255 255 255 / .62);

  --heading-font: "Outfit", sans-serif;
  --body-font: "Instrument Sans", system-ui, sans-serif;

  /* textul mic (titlurile au dimensiuni proprii, cu clamp) */
  --fs-2xs: 12px;
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-md: 15px;
  --fs-base: 16px;
  --fs-lg: 17px;

  /* spațieri */
  --section-y: 88px;        /* sus/jos la secțiuni (120px de la md) */
  --col-gap: 32px;          /* între cele două coloane ale unei secțiuni */
  --container: 1240px;
  --gutter: 16px;           /* marginile laterale (32px de la sm) */
  /* --header-h e definit de fiecare tip de pagină (home.css, doc.css) */

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* ease-out puternic, pentru toată interfața */
  --ease-spring: cubic-bezier(0.22, 1.2, 0.36, 1);  /* cu ușoară depășire: doar unde arată o schimbare de stare (iconița +/− din FAQ) */
  --dur-press: 140ms;                                 /* feedback la apăsare */
  --shadow-btn: 0 1px 2px rgb(var(--orange-rgb) / .25), 0 8px 24px rgb(var(--orange-rgb) / .28);
  --shadow-float: 0 2px 6px rgb(var(--navy-deep-rgb) / .06), 0 18px 48px rgb(var(--navy-deep-rgb) / .12);
}
@media (min-width: 561px) { :root { --gutter: 32px; } }
@media (min-width: 901px) { :root { --section-y: 120px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: var(--body-font);
  font-size: var(--fs-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--heading-font); color: var(--navy); margin: 0; letter-spacing: -0.03em; }
p, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg, video, picture { display: block; max-width: 100%; }
img, video { height: auto; }
.bi { display: inline-block; width: 1em; height: 1em; flex: none; fill: currentColor; vertical-align: -.125em; }  /* Bootstrap Icons, MIT */
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
::selection { background: var(--orange); color: var(--navy-deep); }
.dot { color: var(--orange); }

.container-x { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); position: relative; }
section { scroll-margin-top: var(--header-h); }

/* Logo-ul din antet și subsol (678×178: simbol + „on oblic” + slogan) */
.brand-lockup { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; border-radius: 6px; transition: opacity .2s ease; }
.brand-lockup img { width: auto; }
@media (hover: hover) { .brand-lockup:hover { opacity: .85; } }
.brand-lockup:active { opacity: .7; }
.brand-lockup:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

/* Efectele de hover stau în @media (hover: hover): pe telefon un tap ar lăsa elementul „ridicat” până la următorul tap.
   :active dă feedback la apăsare pe orice dispozitiv. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* fără animații, deplasări sau zoom; păstrăm doar schimbările scurte de culoare și opacitate (hover, file, FAQ) */
  *, *::before, *::after {
    animation: none !important; transition-property: opacity, color, background-color, border-color !important;
    transition-duration: .15s !important; transition-delay: 0s !important;
  }
}