/* ==========================================================================
   tokens.css — variabile de design pentru setul de blocuri „Techno"
   Reconstrucție proprie, în cod curat, a limbajului vizual al demo-ului.
   Toate valorile se pot rescrie pentru fiecare client, într-un singur loc.
   --------------------------------------------------------------------------
   Breakpoints folosite în tot proiectul (mobile-first la utilitare,
   max-width la ajustările de layout, ca să rămână aproape de demo):
     - pana la  575px  → telefon mic
     - pana la  767px  → telefon
     - pana la  991px  → tabletă (aici comută meniul pe varianta mobilă)
     - pana la 1199px  → tabletă mare / laptop mic
     - de la  1200px   → desktop (container plin 1320px)
   ========================================================================== */

:root {
  /* --- Culori de brand --- */
  --t-primary:        #0c5adb;
  --t-primary-600:    #0a4dbd;
  --t-primary-700:    #0942a5;
  --t-primary-300:    #6094da;
  --t-primary-200:    #a4c2f3;
  --t-primary-100:    #d7e4fb;
  --t-primary-soft:   #eef4ff;
  --t-primary-alpha:  rgba(12, 90, 219, .85);
  --t-primary-line:   rgba(12, 90, 219, .30);

  /* --- Neutre --- */
  --t-navy:           #06153a;
  --t-navy-600:       #0b2358;
  --t-dark:           #171717;
  --t-heading:        #232323;
  --t-text:           #686868;
  --t-text-soft:      #7b7b7b;
  --t-text-invert:    #ffffff;
  --t-text-on-dark:   #9eb3ef;
  --t-border:         #e6eaf2;
  --t-border-soft:    #f0f3f9;
  --t-white:          #ffffff;
  --t-bg:             #ffffff;
  --t-bg-alt:         #f5f8ff;
  --t-bg-dark:        #0d1b33;

  /* --- Gradienți reutilizabili --- */
  --t-grad-primary:   linear-gradient(90deg, #1129b9 0%, #2475fc 100%);
  --t-grad-navy:      linear-gradient(135deg, #06153a 0%, #0c2f78 60%, #0c5adb 160%);
  --t-grad-soft:      linear-gradient(180deg, #f7faff 0%, #ffffff 100%);

  /* --- Tipografie --- */
  --t-font-title: "Mulish", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --t-font-body:  "Mulish", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --t-font-meta:  "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --t-fs-base:    16px;
  --t-lh-base:    1.75;

  /* Scară fluidă de titluri (clamp: mobil → desktop) */
  --t-fs-h1:      clamp(2.125rem, 1.30rem + 3.6vw, 4.125rem);  /* 34 → 66 */
  --t-fs-h2:      clamp(1.625rem, 1.13rem + 2.1vw, 2.4375rem); /* 26 → 39 */
  --t-fs-h3:      clamp(1.25rem, 1.08rem + 0.7vw, 1.625rem);   /* 20 → 26 */
  --t-fs-h4:      clamp(1.125rem, 1.04rem + 0.35vw, 1.3125rem);/* 18 → 21 */
  --t-fs-h5:      1.125rem;
  --t-fs-h6:      1rem;
  --t-fs-lead:    1.125rem;
  --t-fs-small:   0.875rem;
  --t-fs-tiny:    0.8125rem;

  --t-fw-regular: 400;
  --t-fw-medium:  500;
  --t-fw-semi:    600;
  --t-fw-bold:    700;
  --t-fw-black:   800;

  --t-lh-title:   1.2;

  /* --- Spațieri --- */
  --t-space-1:    4px;
  --t-space-2:    8px;
  --t-space-3:    12px;
  --t-space-4:    16px;
  --t-space-5:    24px;
  --t-space-6:    32px;
  --t-space-7:    40px;
  --t-space-8:    56px;
  --t-space-9:    72px;
  --t-space-10:   96px;

  /* Ritmul vertical al secțiunilor (demo: ~75-80px sus / 80-94px jos) */
  --t-section-y:      clamp(56px, 4.5vw, 80px);
  --t-section-y-lg:   clamp(64px, 6vw, 96px);
  --t-section-y-sm:   clamp(40px, 3.5vw, 60px);
  --t-gap-grid:       30px;

  /* --- Container --- */
  --t-container:      1320px;
  --t-container-pad:  15px;

  /* --- Raze --- */
  --t-radius-xs:  4px;
  --t-radius-sm:  5px;
  --t-radius:     8px;
  --t-radius-lg:  15px;
  --t-radius-xl:  24px;
  --t-radius-pill: 50px;
  --t-radius-full: 50%;

  /* --- Umbre (preluate ca valori din demo) --- */
  --t-shadow-card:   0 5px 20px 0 rgba(0, 0, 0, .10);
  --t-shadow-soft:   0 0 7px 0 rgba(0, 0, 0, .10);
  --t-shadow-deep:   0 0 10px 0 rgba(0, 0, 0, .50);
  --t-shadow-hover:  0 18px 40px -18px rgba(12, 90, 219, .45);
  --t-shadow-header: 0 2px 5px -2px rgba(0, 0, 0, .10);

  /* --- Tranziții --- */
  --t-ease:       cubic-bezier(.2, .85, .4, 1);
  --t-transition: .3s var(--t-ease);
  --t-transition-slow: .5s var(--t-ease);

  /* --- Straturi --- */
  --t-z-header:   900;
  --t-z-menu:     950;
  --t-z-overlay:  980;
  --t-z-top:      999;
}

/* ==========================================================================
   Teme tematice — grupul F (variantele de primă pagină „Acasă tematice")
   Fiecare clasă se pune pe <body> și suprascrie doar tokenii de mai sus;
   restul blocurilor (care citesc aceleași variabile) preiau automat paleta.
   ========================================================================== */

/* .t-tema--mov — paletă indigo-violet, folosită de variantele AI
   (acasa-ai-solutii, acasa-ai-tehnologie, acasa-ai-instrument) */
body.t-tema--mov {
  --t-primary:        #5b3df0;
  --t-primary-600:    #4a30d1;
  --t-primary-700:    #3c27ab;
  --t-primary-300:    #a89bf5;
  --t-primary-200:    #cac0fa;
  --t-primary-100:    #e7e2fd;
  --t-primary-soft:   #f1eefe;
  --t-primary-alpha:  rgba(91, 61, 240, .85);
  --t-primary-line:   rgba(91, 61, 240, .30);
  --t-navy:           #0b0a2e;
  --t-bg-dark:        #0b0a2e;
  --t-grad-primary:   linear-gradient(90deg, #3c27ab 0%, #5b3df0 100%);
  --t-grad-navy:      linear-gradient(135deg, #0b0a2e 0%, #2a1f78 60%, #5b3df0 160%);
  --t-shadow-hover:   0 18px 40px -18px rgba(91, 61, 240, .45);
}

/* .t-tema--robotica — accent portocaliu-cărămiziu, pe fundal deschis
   (acasa-robotica); se combină bine cu accentele multicolore din
   blocul „accente-culoare" (t-acc--*), deja existent */
body.t-tema--robotica {
  --t-primary:        #d9531f;
  --t-primary-600:    #b8431a;
  --t-primary-700:    #963516;
  --t-primary-300:    #f0a67e;
  --t-primary-200:    #f6c9ac;
  --t-primary-100:    #fbe4d5;
  --t-primary-soft:   #fdece4;
  --t-primary-alpha:  rgba(217, 83, 31, .85);
  --t-primary-line:   rgba(217, 83, 31, .30);
  --t-navy:           #2b1608;
  --t-bg-dark:        #2b1608;
  --t-grad-primary:   linear-gradient(90deg, #963516 0%, #d9531f 100%);
  --t-grad-navy:      linear-gradient(135deg, #241206 0%, #6a2c0f 60%, #d9531f 160%);
  --t-shadow-hover:   0 18px 40px -18px rgba(217, 83, 31, .45);
}

/* .t-tema--date — albastru mai rece, fundaluri alternate gri-albăstrui
   (acasa-data-science); albastrul de brand rămâne aproape neschimbat,
   ca în sursă */
body.t-tema--date {
  --t-primary:        #2875ff;
  --t-primary-600:    #1c5fe0;
  --t-primary-700:    #164cb8;
  --t-primary-300:    #8fb2ff;
  --t-primary-200:    #bcd1ff;
  --t-primary-100:    #e2ebff;
  --t-primary-soft:   #eff1f7;
  --t-primary-alpha:  rgba(40, 117, 255, .85);
  --t-primary-line:   rgba(40, 117, 255, .30);
  --t-bg-alt:         #eff1f7;
}

/* .t-tema--intunecat — fundaluri închise pe toată pagina (nu doar în
   benzile deja închise, cum e heroul); folosită de acasa-securitate
   (fundal bleumarin, ca în sursă) și acasa-software-intunecat (fundal
   aproape negru, ca în sursă) — aceeași nuanță pentru amândouă, o
   simplificare asumată, vezi CONVENTII.md */
body.t-tema--intunecat {
  --t-bg:             #0c1220;
  --t-bg-alt:         #101a2e;
  --t-heading:        #ffffff;
  --t-text:           #aab3c5;
  --t-text-soft:      #8993a8;
  --t-border:         #24304a;
  --t-border-soft:    #1a2338;
}

/* .t-tema--verde — accent verde, pentru grupul I (acasa-green-tech); paleta
   sursei (`#B1E33E`, lime deschis pe antet) e prea deschisă pentru text și
   butoane, deci accentul de brand devine un verde mediu, lizibil pe fundal
   alb, cu fundalurile „dark" într-un verde-brad închis */
body.t-tema--verde {
  --t-primary:        #3f8f2f;
  --t-primary-600:    #347526;
  --t-primary-700:    #285c1d;
  --t-primary-300:    #9bd489;
  --t-primary-200:    #c3e6b7;
  --t-primary-100:    #e5f5df;
  --t-primary-soft:   #eef8e6;
  --t-primary-alpha:  rgba(63, 143, 47, .85);
  --t-primary-line:   rgba(63, 143, 47, .30);
  --t-navy:           #0e2408;
  --t-bg-dark:        #0e2408;
  --t-grad-primary:   linear-gradient(90deg, #285c1d 0%, #3f8f2f 100%);
  --t-grad-navy:      linear-gradient(135deg, #0a1c06 0%, #1f4a14 60%, #3f8f2f 160%);
  --t-shadow-hover:   0 18px 40px -18px rgba(63, 143, 47, .45);
}

/* .t-tema--cald — accent terracota, pentru grupul I (acasa-design-interior);
   sursa („interior-design") nu are o paletă Elementor distinctă (aceeași
   pagină-șablon subțire ca marketing-strategy/social-marketing), dar
   subiectul cere o temă vizual caldă, deci s-a adăugat un accent propriu */
body.t-tema--cald {
  --t-primary:        #b5651d;
  --t-primary-600:    #965117;
  --t-primary-700:    #784011;
  --t-primary-300:    #e0ac78;
  --t-primary-200:    #ecc9a3;
  --t-primary-100:    #f7e4cd;
  --t-primary-soft:   #fbeee1;
  --t-primary-alpha:  rgba(181, 101, 29, .85);
  --t-primary-line:   rgba(181, 101, 29, .30);
  --t-navy:           #2a1607;
  --t-bg-dark:        #2a1607;
  --t-grad-primary:   linear-gradient(90deg, #784011 0%, #b5651d 100%);
  --t-grad-navy:      linear-gradient(135deg, #201004 0%, #63340e 60%, #b5651d 160%);
  --t-shadow-hover:   0 18px 40px -18px rgba(181, 101, 29, .45);
}