/* Eco X — Effects: borders, shadows, motion, image treatment
   The brand reads "industrial / technical": square corners, hairline borders,
   restrained shadows reserved for overlays, and a signature greyscale→color
   image hover. Motion is short and functional — fades and small lifts, never
   bounce. */
:root {
  /* ── Borders ── */
  --border-hair: 1px solid var(--rule);
  --border-ink: 1px solid var(--black);
  --accent-top: 2px solid var(--red);   /* red top/left rule that marks active/hover cards */
  --accent-bar: 3px solid var(--red);   /* heavier accent on pillars / modal tops */

  /* ── Shadows (sparse — only floating UI gets one) ── */
  --shadow-none: none;
  --shadow-mega: 0 16px 48px rgba(0, 0, 0, 0.08);   /* mega-menu dropdown */
  --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.2);   /* dialog / form modal */
  --shadow-fab: 0 4px 24px rgba(37, 211, 102, 0.35); /* WhatsApp FAB */

  /* ── Overlays / glass ── */
  --overlay-hero: linear-gradient(to right, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.6) 55%, rgba(10,10,10,0.2) 100%); /* @kind color */
  --overlay-modal: rgba(0, 0, 0, 0.82);
  --glass-nav: rgba(255, 255, 255, 0.97);
  --blur-nav: blur(12px); /* @kind other */

  /* ── Motion ── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast: 0.15s; /* @kind other */
  --dur: 0.2s; /* @kind other */
  --dur-slow: 0.35s; /* @kind other */
  --dur-img: 0.4s; /* @kind other */
  --lift: translateY(-1px); /* @kind other */

  /* ── Image treatment ── */
  --img-rest: grayscale(15%); /* @kind other */
  --img-hover: grayscale(0%); /* @kind other */
  --img-scale: scale(1.03); /* @kind other */
}