/* =========================================================
   FOTON ROMÂNIA — DESIGN TOKENS
   Sursă: Foton Motor Corporate Identity System Manual v2.0, p.122
   ========================================================= */

/* ---------------------------------------------------------------
   FONT — Exo (același font ca pe fotonhungary.hu), găzduit local.
   Pune în assets/fonts/: exo-300.woff2, exo-400.woff2,
   exo-500.woff2, exo-600.woff2, exo-700.woff2
   (Google Fonts → Exo, sau google-webfonts-helper, subset latin+latin-ext).
   Până atunci cade curat pe fontul de sistem, fără să strice layoutul.
   --------------------------------------------------------------- */

/* Fonturile Exo se activează când fișierele .woff2 ajung în assets/fonts/.
   Cât timp lipsesc, browserul cere patru fișiere inexistente și primește 404,
   iar textul se randează oricum cu fontul de sistem. Blocul original:

@font-face{font-family:"Exo";src:url("../fonts/exo-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Exo";src:url("../fonts/exo-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Exo";src:url("../fonts/exo-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Exo";src:url("../fonts/exo-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Exo";src:url("../fonts/exo-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
*/

:root{
  /* ---------- Brand ---------- */
  --fo-dawn-blue:#041954;
  --fo-azure:#10DCFF;
  --fo-dawn-blue-95:rgba(4,25,84,.95);
  --fo-dawn-blue-75:rgba(4,25,84,.75);
  --fo-dawn-blue-45:rgba(4,25,84,.45);
  --fo-dawn-blue-12:rgba(4,25,84,.12);
  --fo-azure-15:rgba(16,220,255,.15);
  --fo-azure-35:rgba(16,220,255,.35);
  --fo-deep:#020D2C;
  /* Accent din modelul de referință (badge-uri și preț pe cardurile de vehicul).
     Nu e în manualul CI — pentru paletă strict de brand, pune var(--fo-azure). */
  --fo-orange:#F9A12A;
  --fo-orange-dark:#D87C00;
  --fo-blue:#042E6A;          /* albastrul secundar din modelul de referință */
  --fo-btn-radius-soft:12px;  /* raza butoanelor de pe fotonhungary.hu */
  --fo-text-shadow:0 0 0 rgba(0,0,0,0);

  /* ---------- Neutre ---------- */
  --fo-white:#FFFFFF;
  --fo-grey-050:#F4F6FA;
  --fo-grey-100:#E5EAF2;
  --fo-grey-200:#CFD7E4;
  --fo-grey-300:#B2BDCE;
  --fo-grey-500:#7A8699;
  --fo-grey-650:#566072;
  --fo-ink:#0A0F1C;

  /* ---------- Semantice ---------- */
  --fo-success:#128C5A;
  --fo-error:#C2263B;

  /* ---------- Grilă (referință 1920x1080) ---------- */
  --fo-canvas:1920px;
  --fo-vh:100svh;
  --fo-gutter:90px;
  --fo-container:1740px;
  --fo-container-narrow:1100px;
  --fo-container-text:760px;
  --fo-col-gap:24px;

  /* ---------- Header ---------- */
  --fo-header-h:104px;
  --fo-logo-slot:182px;   /* latimea maxima a casetei de logo, manual p.122 */
  --fo-logo-h:56px;       /* 24px padding + 56px logo + 24px padding = 104px */
  --fo-logo-pad:24px;

  /* ---------- Tipografie ---------- */
  --fo-font:"Exo","Foton Sans","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
  /* Scalare fluidă: valorile din manual (70/44/28) se ating exact la 1920px,
     apoi coboară proporțional. Evită H1 de 70px pe ecran de 1440-1600. */
  --fo-h1:clamp(34px, 3.646vw, 70px);   --fo-h1-lh:1.06;
  /* Titlul de hero e un mesaj lung, nu o formulă scurtă gen „EASY MOVE":
     jumătate din H1-ul din manual (70px -> 35px la 1920), ca să încapă pe un rând. */
  --fo-hero-title:clamp(20px, 1.823vw, 35px);
  --fo-h2:28px;                         --fo-h2-lh:1.2;
  --fo-card-name:28px;
  --fo-h3:clamp(20px, 1.458vw, 28px);   --fo-h3-lh:1.25;
  --fo-h4:20px;
  --fo-body:17px; --fo-body-lh:1.68;
  --fo-lead:clamp(17px, 1.042vw, 20px);
  --fo-small:14px;
  --fo-nav:15px;
  --fo-track-wide:.06em;

  /* ---------- Butoane ---------- */
  --fo-btn-h:43px;
  --fo-btn-w:209px;
  --fo-btn-radius:2px;

  /* ---------- Spațiere ---------- */
  --fo-s1:8px;  --fo-s2:16px; --fo-s3:24px; --fo-s4:40px;
  --fo-s5:56px; --fo-s6:82px; --fo-s7:104px; --fo-s8:160px;

  /* ---------- Mișcare ---------- */
  --fo-ease:cubic-bezier(.22,.61,.36,1);
  --fo-fast:.18s; --fo-base:.28s; --fo-slow:.5s;

  /* ---------- Umbre ---------- */
  --fo-shadow-sm:0 1px 2px rgba(4,25,84,.08);
  --fo-shadow-md:0 8px 28px rgba(4,25,84,.10);
  --fo-shadow-lg:0 18px 60px rgba(4,25,84,.18);
}

@media (max-width:1440px){ :root{ --fo-gutter:56px; } }
@media (max-width:1080px){ :root{ --fo-gutter:40px; } }
@media (max-width:768px){
  :root{ --fo-gutter:20px; --fo-header-h:64px; --fo-logo-h:34px; --fo-logo-pad:15px;
         --fo-body:16px; --fo-s6:48px; --fo-s7:56px; --fo-s8:72px; }
}