/* ==========================================================================
   Paleta fiecarui produs, pusa peste sistemul de baza.
   Se aplica pe <body data-produs="ripple|aurabook|autolist"> si rescrie doar
   simbolurile de culoare, nu si asezarea - asa paginile de produs arata ca
   produsul, dar se comporta exact ca restul site-ului, in ambele teme.
   ========================================================================== */

/* Pe tema luminoasa toate produsele stau pe acelasi crem ca restul site-ului
   (vezi base.css) - aici raman doar culorile lor de accent si variantele
   pentru tema intunecata. */

/* ---------- Ripple: auriu ---------- */
[data-produs="ripple"]{--dot:#c9a869}
[data-theme="dark"] [data-produs="ripple"]{
  --bg:#080f1f; --bg-2:#0c1526; --bg-3:#121d33;
  --ink:#f2f4f8; --ink-2:#aab3c4; --ink-3:#8892a6;
  --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.07);
  --inv-bg:#c9a869; --inv-ink:#101a2c;
}

/* ---------- AuraBook: verdele de confirmare ---------- */
[data-produs="aurabook"]{--dot:#1f7a4d}
[data-theme="dark"] [data-produs="aurabook"]{
  --bg:#120d0f; --bg-2:#1b1417; --bg-3:#241b1f;
  --ink:#f7f2f3; --ink-2:#c0b0b4; --ink-3:#95848a;
  --line:rgba(255,255,255,.15); --line-2:rgba(255,255,255,.08);
  --inv-bg:#f7f2f3; --inv-ink:#120d0f;
}

/* ---------- AutoList: turcoazul aplicatiei ---------- */
[data-produs="autolist"]{--dot:#0f8f9e}
[data-theme="dark"] [data-produs="autolist"]{
  --dot:#3fb6c8;
  --bg:#0a0d11; --bg-2:#11161c; --bg-3:#171e26;
  --ink:#eef2f5; --ink-2:#a9b4bd; --ink-3:#7e8a94;
  --line:rgba(255,255,255,.15); --line-2:rgba(255,255,255,.08);
  --inv-bg:#3fb6c8; --inv-ink:#05181c;
}

/* ---------- SmartLink: auriul aplicatiei lui ---------- */
[data-produs="smartlink"]{--dot:#c9a869}
[data-theme="dark"] [data-produs="smartlink"]{
  --bg:#070d18; --bg-2:#0b1424; --bg-3:#111d33;
  --ink:#f2f4f8; --ink-2:#aab3c4; --ink-3:#8892a6;
  --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.07);
  --inv-bg:#c9a869; --inv-ink:#101a2c;
}

/* ---------- semnul de produs din antetul paginii ---------- */
.prod-badge{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px}
.prod-badge .glyph{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--dot)}
.prod-badge .glyph svg{width:20px;height:20px}
.prod-badge span{font-size:13.5px;color:var(--ink-3)}

/* fisa tehnica scurta din antetul produsului */
.prod-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-2);
  border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;margin-top:40px}
.prod-facts div{background:var(--bg);padding:18px 20px}
.prod-facts dt{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.prod-facts dd{font-size:16px;font-weight:600;letter-spacing:-.015em}
@media (max-width:820px){.prod-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.prod-facts{grid-template-columns:1fr}}

/* telefoanele din pagina AuraBook */
.phones{display:flex;gap:clamp(12px,2vw,26px);align-items:flex-start;justify-content:center}
.phone{width:min(48%,260px);padding:8px;border-radius:30px;background:var(--bg-3);border:1px solid var(--line);
  box-shadow:var(--shadow)}
.phone img{border-radius:23px}
.phone:nth-child(2){margin-top:44px}

/* dispozitivul Ripple, desenat in cod (vezi assets/ripple3d.js) */
.dev-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  min-height:360px;user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:grab}
.dev-wrap.grabbing{cursor:grabbing}
.dev-hint{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);opacity:.75}