/* ════════════════════════════════════════════════════════════════════
   tokens.css — SINGLE SOURCE OF TRUTH pentru tot site-ul public Conexo.
   Schimbi culorile/umbrele AICI, o singură dată. Componentele folosesc var().
   Tema dark = aceiași tokeni, suprascriși sub html.theme-night (apus→răsărit).
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* brand */
  --navy: #0B3C5D;            /* suprafețe brand: navbar, butoane, footer, logo */
  --navy-dark: #094a73;
  --navy-light: #1a6fa0;
  --navy-bg: #f0f4f8;        /* fundal subtil albastru (chip-uri, iconițe) */
  --accent: #0B3C5D;         /* TEXT/linkuri accent — navy în light, light-blue în dark */
  /* text */
  --text: #111111;
  --text-sec: #555555;
  --text-muted: #888888;
  /* suprafețe */
  --bg: #FAFAFA;             /* fundal pagină */
  --white: #FFFFFF;          /* suprafețe albe: inputuri, panou mobil, grafic */
  /* carduri de conținut — în light = identice cu suprafețele albe */
  --card: var(--white);
  --card-text: var(--text);
  --card-text-sec: var(--text-sec);
  --card-muted: var(--text-muted);
  --card-border: var(--border);
  --card-field: var(--white);   /* fundal inputuri pe card */
  --surface-2: #f8fafc;      /* gradient soft / hover */
  --nav-bg: rgba(255,255,255,0.85);
  --soft-1: #f4f7fa;         /* gradient secțiuni (method/contact) */
  --soft-2: #eef2f7;
  /* text pe suprafețe brand (navy) */
  --on-navy: #ffffff;
  --on-navy-soft: rgba(255,255,255,0.85);
  --on-navy-mute: rgba(255,255,255,0.65);
  /* linii */
  --border: #e5e7eb;
  --border-light: #f0f0f0;
  /* forme + efecte */
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Tema NOAPTE (activată de theme-boot.js: html.theme-night) ──
   Bază dark navy (fundal + carduri) cu accente de gri deschis (borduri, linii,
   text secundar, chip-uri) — contrast elegant navy / gri. */
html.theme-night {
  --navy: #1a5e8f;           /* brand — butoane/navbar/footer, separat de fundalul navy */
  --navy-dark: #114868;
  --navy-light: #2f86c0;
  --navy-bg: #34465a;        /* chip-uri/iconițe — accent gri deschis pe navy */
  --accent: #9fd0f5;         /* accent text/linkuri → light-blue (lizibil pe dark) */
  --text: #eef3f8;
  --text-sec: #c2ccd6;       /* gri deschis */
  --text-muted: #94a0ac;     /* gri deschis */
  --bg: #0e2236;             /* fundal pagină — dark navy */
  --white: #163450;          /* suprafețe albe (inputuri/panou/grafic) — navy */
  /* carduri de conținut — darkest navy + scris alb (consistent cu fundalul navy) */
  --card: #0c1f33;
  --card-text: #f5f8fc;
  --card-text-sec: #b6c1cd;
  --card-muted: #8995a2;
  --card-border: #22394f;       /* border navy mai deschis — conturează cardul */
  --card-field: #081521;        /* inputuri pe card — navy aproape negru */
  --surface-2: #1d3e5c;      /* hover / gradient soft */
  --nav-bg: rgba(14,34,54,0.85);
  --soft-1: #122c44;
  --soft-2: #0e2236;
  --border: #5a6b7c;         /* accent gri deschis — decupează cardurile pe navy */
  --border-light: #44525f;
  /* alias-uri folosite de paginile de conținut (content.css) */
  --soft: #163450;
  --muted: #94a0ac;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.45);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.45);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.5);
}

/* Randare font CONSISTENTĂ pe TOT site-ul (SSOT). Fără asta, paginile statice care nu
   setau -webkit-font-smoothing păreau „mai groase" pe macOS decât homepage/Insights. */
html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Scrim-ul video din hero: light implicit (în index.html), dark navy pe dark. */
.theme-night .hero-scrim { background: linear-gradient(100deg, rgba(14,34,54,.90) 0%, rgba(14,34,54,.78) 42%, rgba(14,34,54,.40) 100%); }

/* Iconițe SVG cu stroke/fill navy hardcodat → urmează accentul (vizibile în dark).
   CSS stroke/fill bate atributele de prezentare din <svg>. */
.theme-night [stroke="#0B3C5D"] { stroke: var(--accent); }
.theme-night [fill="#0B3C5D"]   { fill: var(--accent); }

/* Tranziție lină la comutarea temei (fără a anima încărcarea inițială). */
html.theme-ready body, html.theme-ready body * {
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}

/* ── Buton comutare temă (soare/lună) ── */
.theme-toggle {
  background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1;
  padding: 6px; border-radius: 10px; transition: background .2s; color: inherit;
}
.theme-toggle:hover { background: var(--navy-bg); }

/* ── Header / navigare — FORMAT CANONIC, identic cu homepage, pe TOATE paginile (SSOT).
   Paginile NU mai definesc .nav/.nav-inner/.logo local — moștenesc de aici, ca meniul să
   stea în EXACT aceeași poziție pe orice pagină (max-width 1200 = ca homepage). ── */
.nav { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); transition: box-shadow .3s; }
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 12px; cursor: pointer; text-decoration: none; color: inherit; }
.logo-mark { width: 42px; height: 42px; background: var(--navy); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--on-navy); font-weight: 700; font-size: 18px; letter-spacing: -.5px; }
.logo-name { font-weight: 600; font-size: 17px; letter-spacing: .5px; }
.logo-sub { font-size: 10px; letter-spacing: 3px; color: var(--text-muted); text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a { position: relative; color: var(--text-sec); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; transition: color .2s; }
.nav-links a:hover { color: var(--accent); }
.nav-links a.active { color: var(--accent); font-weight: 700; }
.nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--accent); transition: width .3s; }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
@media (max-width: 860px) {
  .nav-links { gap: 16px; max-width: 62vw; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
}
/* Butonul CTA din dreapta navbar-ului — IDENTIC cu homepage (.cta-btn), ca să ancoreze
   dreapta și meniul să stea în EXACT aceeași poziție. Pe pagini secundare e link la /contact. */
.nav-cta { display: inline-flex; align-items: center; background: var(--navy); color: var(--on-navy); padding: 10px 22px; border-radius: 12px; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: all .3s var(--ease); }
.nav-cta:hover { background: var(--navy-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(11,60,93,0.3); }
@media (max-width: 860px) { .nav-cta { display: none; } }

/* ── Hero PARTAJAT „mare" pentru TOATE paginile secundare (SSOT) ──
   Imaginea de fundal se pune INLINE pe element, cu overlay gradient navy peste ea:
   style="background-image:linear-gradient(90deg,rgba(8,36,55,.92),rgba(8,36,55,.5) 52%,rgba(8,36,55,.15)),url(/media/X-hero.webp)"
   Gradientul ține stânga închisă (text alb lizibil), dreapta arată poza. */
.page-hero { min-height: 440px; display: flex; align-items: flex-end; color: var(--on-navy);
  background-color: var(--navy-dark); background-size: cover; background-position: center; background-repeat: no-repeat; }
.page-hero .ph-in { max-width: 1140px; width: 100%; margin: 0 auto; padding: 0 24px 48px; }
.page-hero .ph-crumb { font-size: 13px; color: var(--on-navy-soft); margin-bottom: 14px; }
.page-hero .ph-crumb a { color: var(--on-navy); text-decoration: none; }
.page-hero .ph-crumb a:hover { text-decoration: underline; }
.page-hero .ph-title { font-size: clamp(30px, 4.4vw, 46px); font-weight: 800; line-height: 1.12; letter-spacing: -.5px; max-width: 780px; }
.page-hero .ph-sub { font-size: 18px; color: var(--on-navy-soft); margin-top: 14px; max-width: 640px; line-height: 1.6; }
.page-hero .ph-date { font-size: 14px; color: var(--on-navy-soft); margin-top: 12px; }
@media (max-width: 768px) { .page-hero { min-height: 320px; } .page-hero .ph-in { padding-bottom: 32px; } }

/* ── Footer PARTAJAT pentru paginile secundare (statice + conținut) ── */
.site-foot { background: var(--navy); color: var(--on-navy-soft); padding: 32px 24px; margin-top: 60px; text-align: center; font-size: 13px; }
.site-foot .foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin-bottom: 14px; }
.site-foot .foot-links a { color: var(--on-navy-soft); text-decoration: none; }
.site-foot .foot-links a:hover { color: var(--on-navy); text-decoration: underline; }

@media(prefers-reduced-motion:reduce){ html.theme-ready body, html.theme-ready body * { transition: none; } }