/* ============================================================
   Agenda360 — Design Tokens & Componente de bază
   Folosește acest fișier direct în landing page.
   Fonturi: <link> Google Fonts — Sora (display) + Inter (text)
   ============================================================ */

:root {
  /* Culori de brand */
  --a360-ink:        #14182B;  /* Miez de noapte — text principal, fundal dark */
  --a360-ink-soft:   #3A4060;  /* Ardezie — text secundar pe fundal deschis */
  --a360-mist:       #8A91A8;  /* Ceață — text terțiar, etichete */
  --a360-blue:       #2440E6;  /* Ultramarin — culoarea primară de acțiune */
  --a360-blue-hover: #1B33C4;
  --a360-blue-soft:  #E9ECFD;  /* fundal pentru badge-uri / stări active */
  --a360-gold:       #C8A24B;  /* Auriu — accent premium, doze mici */
  --a360-porcelain:  #F4F5F7;  /* Porțelan — fundal de secțiune */
  --a360-white:      #FFFFFF;
  --a360-line:       #E3E5EC;  /* linii fine, borduri */

  /* Tipografie */
  --a360-font-display: "Sora", "Avenir Next", "Segoe UI", sans-serif;
  --a360-font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Scară tipografică (desktop) */
  --a360-h1: clamp(2.4rem, 5vw, 3.6rem);
  --a360-h2: clamp(1.7rem, 3vw, 2.3rem);
  --a360-h3: 1.25rem;
  --a360-body: 1.0625rem;
  --a360-small: 0.875rem;

  /* Spațiere & formă */
  --a360-radius: 14px;
  --a360-radius-pill: 999px;
  --a360-shadow: 0 12px 32px rgba(20, 24, 43, 0.10);
  --a360-shadow-soft: 0 4px 14px rgba(20, 24, 43, 0.06);
}

/* ---------- Bază ---------- */
.a360 body, .a360 {
  font-family: var(--a360-font-body);
  font-size: var(--a360-body);
  color: var(--a360-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.a360 h1, .a360 h2, .a360 h3 {
  font-family: var(--a360-font-display);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
}
.a360 h1 { font-size: var(--a360-h1); font-weight: 700; }
.a360 h2 { font-size: var(--a360-h2); font-weight: 600; }
.a360 h3 { font-size: var(--a360-h3); font-weight: 600; }

/* ---------- Butoane ---------- */
.a360-btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--a360-font-display);
  font-weight: 600; font-size: 1rem;
  padding: 0.8em 1.6em;
  border-radius: var(--a360-radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.a360-btn:focus-visible { outline: 3px solid var(--a360-gold); outline-offset: 2px; }
.a360-btn:active { transform: translateY(1px); }

.a360-btn--primary {
  background: var(--a360-blue); color: #fff;
  box-shadow: var(--a360-shadow-soft);
}
.a360-btn--primary:hover { background: var(--a360-blue-hover); }

.a360-btn--secondary {
  background: transparent; color: var(--a360-ink);
  border-color: var(--a360-ink);
}
.a360-btn--secondary:hover { background: var(--a360-ink); color: #fff; }

.a360-btn--ghost { background: transparent; color: var(--a360-blue); padding-inline: 0.4em; }
.a360-btn--ghost:hover { text-decoration: underline; }

/* Pe fundal închis */
.a360-dark .a360-btn--secondary { color: #fff; border-color: rgba(255,255,255,.6); }
.a360-dark .a360-btn--secondary:hover { background: #fff; color: var(--a360-ink); }

/* ---------- Badge / etichetă ---------- */
.a360-badge {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--a360-font-display);
  font-size: var(--a360-small); font-weight: 600;
  color: var(--a360-blue); background: var(--a360-blue-soft);
  padding: 0.35em 0.9em; border-radius: var(--a360-radius-pill);
}
/* punctul „grad" — motivul semnăturii brandului */
.a360-badge::before {
  content: ""; width: 9px; height: 9px;
  border: 2.5px solid var(--a360-gold); border-radius: 50%;
}

/* ---------- Card ---------- */
.a360-card {
  background: var(--a360-white);
  border: 1px solid var(--a360-line);
  border-radius: var(--a360-radius);
  padding: 1.75rem;
  box-shadow: var(--a360-shadow-soft);
}
.a360-card:hover { box-shadow: var(--a360-shadow); }

/* ---------- Secțiuni ---------- */
.a360-section { padding: clamp(3rem, 8vw, 6rem) 1.5rem; }
.a360-section--porcelain { background: var(--a360-porcelain); }
.a360-dark { background: var(--a360-ink); color: var(--a360-porcelain); }
.a360-dark .a360-mist { color: var(--a360-mist); }

/* linie fină aurie — separator de secțiune */
.a360-rule {
  border: 0; height: 1px; max-width: 120px;
  background: var(--a360-gold); margin: 0 0 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .a360 *, .a360-btn { transition: none !important; }
}